Topic: stopping inherited background images Pages that link to <a href="https://ozoneasylum.com/backlink?for=31519" title="Pages that link to Topic: stopping inherited background images" rel="nofollow" >Topic: stopping inherited background images\

 
Author Thread
strangelybrown
Obsessive-Compulsive (I) Inmate

From:
Insane since: Nov 2009

IP logged posted posted 12-07-2009 11:22 Edit Quote

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?

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 12-07-2009 12:51 Edit Quote

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?

strangelybrown
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2009

IP logged posted posted 12-07-2009 13:22 Edit Quote

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..

strangelybrown
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2009

IP logged posted posted 12-07-2009 13:45 Edit Quote

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..

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 12-07-2009 15:35 Edit Quote

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.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 12-07-2009 15:35 Edit Quote

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.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 12-08-2009 10:02 Edit Quote

Mmm, this is what RGBA will be good for.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 12-08-2009 10:45 Edit Quote

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

strangelybrown
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2009

IP logged posted posted 12-08-2009 13:38 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu