Multiple background-color layers

Question

I wondered if it was possible to create two background-colors for a div an overlay them.

I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.

Answer 1

Without understanding why you want this, it can be done by using solid color gradients: fiddle.

body {
    background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
                linear-gradient(white, white); /* first bg is on top of this */

}

Answer 2

Though Adrift's answer is the way to go, you can also use pseudo elements for this.

body {
    background: white;
    position: relative;
}

body:before {
    content: "";
    position: absolute;
    top: 0;
    left; 0;
    width: 100%;
    height: 100%;
    background: rgba(220,14,120,0.5);
    z-index: 1;
}

/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
    z-index: 2;
    position: relative;
}

Here is a fiddle.

However, this is not production friendly:

• Setting position relative on body and all other elements when not necessary
• Setting unnecessary z-index on all elements

The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.