Geek Answers Handbook

Background color for nested divs

Is it possible for the child div not to inherit the background color of the parent div and instead inherit the background of the body tag?

For instance:

<body>
  <div id="main">
    <div id="sub">
       some content
     </div>
  </div>
</body>

body {
  background-image: url("blah");
}
#main {
  background-color: white;
}

Sub sub will always inherit the background color as white. But is there a way (work around) in CSS to indicate that sub should not inherit white? I read that CSS does not allow this, but is there any work for this?

+5
source share
5 answers

What you ask is that there is a background image on the body, the body contains a div that has a white background color.

And then you need a div inside this div that is viewing the background image? It's impossible.

, , "" div , , jQuery ( div css), , . , , div , , .

:

http://jsfiddle.net/aFpAX/

jQuery

div position(), background-position :

$(function(){

    var pos = $('#window').position();
    $('#window').css('background-position','-'+pos.left+'px -'+pos.top+'px');

});

:

http://jsfiddle.net/aFpAX/2/

+2

CSS, JS

0

, main - - .. , sub, , , border ?

0
source

Or ... Use PNG graphics, and certain areas are made "transparent."

Remember to set the div you want to view in the background: transparent in css.

0
source

Or you might consider using css variables in a stylesheet, as shown below.

@variables {
    bodyColor: #999;
    divColor: #DDD;
}

body {  
    background-color: var(bodyColor);  
}  
#outerDiv {  
    background-color: var(divColor); 
} 
#innerDiv {  
    background-color: var(bodyColor);
}
0
source

More articles:


All Articles