how to make child div to "do not inherit background color" from its father div?

Question

I want make different background between father elem and child elem.

fiddle : http://jsfiddle.net/cbcL6osm/

I mean, if you see the child div, its background color is red inherited from father div.

That's not I want.

I want make child div to only shows its background image, and do not inherit background color from its father div.

Below is the code of fiddle : http://jsfiddle.net/cbcL6osm/

html :
<div class="father">
    test
    <div class="child">
        test
    </div>
</div>


css :
.father {
    width: 100px;
    height: 100px;
    background-color:red;
    position:relative;
}

.child {
    position:absolute;
    top:20px;
    left:20px;
    width: 60px;
    height: 60px;
    background:url('https://www.google.co.kr/logos/doodles/2014/leo-tolstoys-186th-birthday-5756677508825088.2-res.png') center;
    background-size:30px 30px;
    background-repeat:no-repeat;
    border:thin solid;
}

Answer 1

The point, actually, is your false premise.

The child div does not inherit the parent's background color

The default background of the div is transparent, that is why the red color is appearing. You would need to replace the background-color of the child div with another one.

MDN background-color docs states:

Initial value: transparent
Inherited: no