Override parent background color to none in nested Divs

[MarPlo]

I have a parent Div and another Div inside, as child element.
The parent Div has set a background-color property, and i want to have the child Div without background-color. I set background-color: none; for the child Div, but it doesn't work, it still inherits the background-color of the parent element.
This is the css and html code:

Code: Select all

<style>
#parent {
  position: relative;
  width: 80%;
  height: 200px;
  background-color: #bbccfe;
}
#child {
  margin: 5px auto;
  width: 75%;
  height: 90%;
  background-color: none;
  border: 2px solid #f00;
}
</style>

<div id="parent">Parent Div
  <div id="child">Child Div</div>
</div>

Why then is the parent color not overridden?

The default value for background-color propety is transparent, not the none.
Also, the background property is not inherited by children by default.
Since background isn't being inherited, setting it to "none" in the child element, it acts like "transparent", so it shows the backgrond of the #parent.
The background style of #parent does not apply to #child, and #child can specify its own background color independently of its parent, so you should set the background-color you want to have for the #child Div.

Code: Select all

<style>
#parent {
  background-color: #bbccfe;
}
#child {
  background-color: #fefefe;
}
</style>