WordPress.org

Forums

Twenty Twelve
header transparent in FF (17 posts)

  1. ladysaat
    Member
    Posted 2 years 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 2 years 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. Mikey Arce
    Member
    Posted 2 years 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 2 years 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 2 years 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. Mikey Arce
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    I finally found the area i think?

    SCREENSHOT

  11. Mikey Arce
    Member
    Posted 2 years 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 2 years 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 2 years 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. Mikey Arce
    Member
    Posted 2 years 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 1 year 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
    Forum moderator
    Posted 1 year ago #

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

  17. Andrew
    Forum moderator
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic