Topic: stopping inherited background images

Hello,

I have a background image set in the 'body' but I have a photoviewer set within various 'divs' and I don't want the background image showing through the photoviewer. I have tried 'background-image: none;' , setting the background color to white and even tiling a 1x1 white pixel. But my 'body' background image still shows through every element.

I have even tried '!important' but to no avail.

Has anyone else come up against this before?

Can you show us an example of your code? Or post a direct link to your site?

Normally setting a background colour of a nested div should be fine to hide the background from showing through, so perhaps there is something wring with your HTML or CSS.

Also have you run your website through the W3C validator?

Hello,
here is a link:

http://www.dogtonharrants.co.uk/debug/retro.html

Notice how the white on red spots show through the images on the photoviewer?

The polka dot background has been set in the 'body'. I then have a 'div' called 'container' where i have set the opacity to 0.95 - having the desired effect of making the background very feint so the content stands out . I don't understand how the polka dots don't show through the logos but does with the photoviewer. All I need is fopr the photos to sit on a solid white background.

Any ideas please?

I will run it through a validator..

ps I have just noticed that if I set the background image in the 'container' div as opposed to within 'body' then the photoviewer looks fine - i.e. no dots showing through. It isn't the solution though as I lose the main page background but at least it proves it can be done..

I would guess this is an issue with the jQuery you are using setting some transparency on an element, and has nothing to do with your CSS.

Ok, so it's simply because opacity is inherited amongst all children, there is a workaround for this I found here

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

A quick search will show you lots of results for opacity inheritance, and how to avoid it.

So it looks like you'll need a little change in your HTML and some extra CSS.

Let me know if you want any more help implementing this, but the article should explain all you need to know.

Mmm, this is what RGBA will be good for.

Ah yes, I've used them on one of my sites, because I was experience the same problem with the opacity property.

I've aborted using opacity and have just created a background png with a Photoshopped 90% opacity layer. Not ideal as the container background isn't quite continuous with the body background (given there are now 2 separate background images) but at least there are no images showing through the photoviewer. I appreciate your help.