Maintain branding opacity whilst making background transparent - nearly there!

[fintan+ 1]

Hi All I'm trying to make the background of my site header transparent, which I've done. But the CSS i've used has some unwanted side effects: My logo has gone transparent My social icons are transparent My Nav is tranparent and the drop down has dissappeared Here's a link: http://keoghpublicity.com/about-us/ This is the CSS I am using:

#header {opacity:0.8;filter:alpha(opacity=80)}

All and any advise very welcome - Thanks -- Fintan

[Jackey 29]

I advise to not make the complete #header transparent but only the background. [code]section#branding div.content, section#nav div.content { background-color: transparent; }[/code] [code]section#nav div.texture, section#branding div.texture { background-color:white; opacity:0.8; filter:alpha(opacity=80); }[/code] Should work... give it a try!

[fintan+ 1]

Thanks Jackey Got my nav dropdown back :) but otherwise all still the same, although I'm starting to like the see through nav. If I could just get the logo back to full opacity I think I'd be happy to go with that. Thanks again for your time and help I really appreciate it. -- Fintan

[Jackey 29]

[code]#branding .mainlogo-img { opacity:1.0 !important; filter:alpha(opacity=100) !important; /* For IE8 and earlier */ }[/code] Should get your logo to full opacity

[fintan+ 1]

Thanks agian Jackey, still no joy though. Its strange 'cos if I use just #branding div.content, #nav div.content { background-color: transparent; } I get logos etc in 100% opacity with a transparent background, but tweeking it, adding color etc. doesn't seem to work. So when all 3 (as you give above) are used and I use Firebug to tweek the opacity, I can get the logo lighter with e.g. 0.3 but I can't go the other way and opacity: 1.0 just resolves at 0.8? Confused? Anyhoo thanks again - appreciate your time and effort. -- Fintan

[Jackey 29]

OK I don't give that easy... Another approach... Create a filler-80.png file with a 80% white color and place it in your /wp-content/uploads/ folder. Add this code: [code]section#branding div.content, section#nav div.content { background-color: transparent; } section#nav div.texture, section#branding div.texture { background: transparent url("/wp-content/uploads/filler-80.png") repeat; }[/code] (Remove the old stuff regarding this)

[Jenny 33]

Let us know how Jackey's solution works for you!

[fintan+ 1]

Ah Haaaaaaaaa Kudos my friend, the power of lateral thought. IMPRESSIVE Worked perfectly, looks great, many thanks for the help, your persistance is really appreciated. Thanks -- Fintan