WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
header transparent in FF (17 posts)

  1. ladysaat
    Member
    Posted 11 months ago #

    I have tried everything I can think of to get the white background behind my header image to go away. I originally didn't make a child theme, but now I have one. I'll reload the old twenty twelve later.

    I have tried using Firebug, but stupidly I cannot figure out what the white is? I have tried this:

    #header {background-color:transparent;}
    #page-wrap {background-color:transparent;}
    #masthead.site-header {background-color:transparent;)
    #content, .single {background-color: #fff;}
    #main.wrapper {background-color:transparent;}

    The site URL is: HERE

  2. ladysaat
    Member
    Posted 11 months ago #

    Oh, and in IE it is transparent?? Usually I can get my sites to work flawlessly in FF and NEVER quite right in IE. Go figure.

  3. mikeyarce
    Member
    Posted 11 months ago #

    it looks like your actual header image has white in the background:
    header image

    You might need to change the actual PNG file to made it transparent.

  4. ladysaat
    Member
    Posted 11 months ago #

    so weird! it is totally transparent. Look at the site in IE. I wonder what the deal is with FF.

  5. ladysaat
    Member
    Posted 11 months ago #

    Okay so researching FF and PNG transparency.. I found this:
    FF Support Thread

    I don't understand what the original person meant when they answered, concerning the background and grey letters. But at the bottom a gentleman says DIV transparency works? Maybe?
    What DIV would I change to get that area behind the header to transparent?

  6. mikeyarce
    Member
    Posted 11 months ago #

    Here's a screenshot of what I think the problem is - the image has some transparency but also a big white rectangular box.

  7. ladysaat
    Member
    Posted 11 months ago #

    My header image is the bar and the transparent rectangle behind it. I don't have a clue what that white box is? I didn't create a logo image with any white behind it, and I do graphic design. That's why I am so perplexed by this Firefox thing.

    Is that white box a div container that I am blind to? I don't understand why the website in IE, safari, and chrome show the header correctly with the full transparency behind it. That must mean I got the CSS right in one of those things to turn the container transparent.

  8. ladysaat
    Member
    Posted 11 months ago #

    okay so I replaced the old logo with a new NON transparent one. I still see a random white box? however it is the width of the blog content/blog width. I keep clicking around with Firebug and Inspect Element with Web Dev. I must be straight daft that I can't find which DIV that white is coming from.

  9. ladysaat
    Member
    Posted 11 months ago #

    wait wait... I might have it. Firefox has a bug apparently with transparency and PNG files. It adds some weird background. I made a bunch of DIV's in my CSS transparent in the hope of getting rid of the white.

    If you look at my site in IE, Safari, CHrome... It displays correctly without the white. Yes I know it's a few pixels off. I'll find that code later.

    Can I put a semi-transparent background in a DIV? Like assign the DIV a background?

  10. ladysaat
    Member
    Posted 11 months ago #

    I finally found the area i think?

    SCREENSHOT

  11. mikeyarce
    Member
    Posted 11 months ago #

    hey - just checking up on this issue - were you able to figure it out?
    Maybe you can post a link to a mockup of what you want it to look like so I can better understand the problem.
    Currently for me it looks the same in FF, Chrome, and IE.

  12. ladysaat
    Member
    Posted 11 months ago #

    no! *cries. hahaha.
    okay I'll make a mockup of it.
    wait... did you say you see the white box thingy in FF, Chrome and IE? I only see it in FF and i've used different systems to cross check FF, Chrome, IE, and Safari.
    UGH.
    Even in the other browsers that don't have the goofy white box of pissyness, I have to figure out how to scooch (technical term) the header down a few pixels to line up with the grey background.
    Okay let me go take a screen shot, and do a quick deal in ps, then I'll post the link
    BTW....

    THANK YOU FOR EVEN CHECKING BACK!!!! (nm helping me and taking the time in the first place)
    :)

  13. ladysaat
    Member
    Posted 11 months ago #

    okay.. this is what it is supposed to look like, and also what I see in chrome, IE, and Safari currently. Just not FF. Meh.

    IMAGE

  14. mikeyarce
    Member
    Posted 11 months ago #

    I had a look today in FF, and Chrome - and they match your image perfectly!
    Could be your version of firefox?

  15. ladysaat
    Member
    Posted 6 months ago #

    I updated twenty twelve and even though I had a child theme the style disappeared.
    Now I have that dang white space around the header image again! I could scream!
    I changed nothing in my child CSS

  16. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 6 months ago #

    Why are you stopping us from right clicking on your site, don't you want us to help?

  17. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 6 months ago #

    Btw your background image has the white space I think you're referring to, doesn't it? Look at the white space above the grey on your image: http://blog.latinavega.com/wp-content/uploads/2013/05/blogheader.gif

Reply

You must log in to post.

About this Theme

About this Topic