header transparent in FF

  • 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

Viewing 15 replies - 1 through 15 (of 16 total)
  • Thread Starter ladysaat

    (@ladysaat)

    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.

    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.

    Thread Starter ladysaat

    (@ladysaat)

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

    Thread Starter ladysaat

    (@ladysaat)

    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?

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

    Thread Starter ladysaat

    (@ladysaat)

    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.

    Thread Starter ladysaat

    (@ladysaat)

    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.

    Thread Starter ladysaat

    (@ladysaat)

    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?

    Thread Starter ladysaat

    (@ladysaat)

    I finally found the area i think?

    SCREENSHOT

    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.

    Thread Starter ladysaat

    (@ladysaat)

    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)
    ??

    Thread Starter ladysaat

    (@ladysaat)

    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

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

    Thread Starter ladysaat

    (@ladysaat)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘header transparent in FF’ is closed to new replies.