CODEWITHSUNDEEP
css
netdigger
netdigger

Reputation: 3789

Why is background-image of childelement ontop of parents background-color?

I have the following CSS code:

#overlayouter
        {
            display: inline-block;
            background-color: red;

            width: 900px;
            height: 900px;

            z-index: 100;
        }
        #overlayinner
        {
            display: inline-block;
            position: relative;

            z-index: 0;

            width: 900px;
            height: 900px;

            background-image: url(picurl);
            background-position: 0 0;
            background-repeat: no-repeat;
        }

HTML is just:

<div id="overlayouter">
    <div id="overlayinner">

    </div>    
</div>

I have a background image in a child div.

And I want a background-color in it's parent div, with rgb() (now it's just red).

But why is the child elements background ontop? Is it because an element can only have background-color OR background-image? And the child's kind takes presedence?

I want the parent div to have a rgba later which will make some type of overlay.

I have set up a jsfiddle showing the problem.. http://jsfiddle.net/9Rj9V/

Upvotes: 2

Views: 981

Answers (2)

apaul
apaul

Reputation: 16170

Without z-index:
enter image description here

With z-index:
enter image description here

The Stacking Context:
With z-index

In summary:

  • Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity).
  • Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
  • Each stacking context is completly independent from its siblings: only descendant elements are considered when stacking is processed.
  • Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. -MDN

Upvotes: 4

Omega
Omega

Reputation: 3038

Change z-index: 0; to z-index: -1; for #overlayinner. jsfiddle.net/9Rj9V/1

Upvotes: 1

Related Questions