Create a background-image over a background-color with different opacities for each element Here the demo

The code below creates a background-image over a background-color with different opacities for each element. Is there a cleaner way of achieving this?



.component{
 min-height: 100vh;
 min-width:100vw; 
 font-size:5em;  

 display:flex;
 justify-content: center;
 align-items: center;  
 color:black;

}
.component::before{
 content: "";

 position: absolute;
 top: 0; 
 left: 0;

 width: 100%; 
 height: 100%;  
 min-height: 100vh;
 min-width:100vw;

 opacity:1;
 z-index:-1;  
 background: url("https://www.pngarts.com/files/5/Los-Angeles-Free-PNG-Image.png") center 100px/500px repeat;
}


.component_background_color::after{ 
 content: "";

 position: absolute;
 top: 0; 
 left: 0;

 width: 100%; 
 height: 100%;  
 min-height: 100vh;
 min-width:100vw;
 
  opacity:0.3;
 z-index:-2;  
 background:green;
}
&lt;div class="component"&gt;
    &lt;div class="component_background_color"&gt; 
      Awesome WebPage  
    &lt;/div&gt;
&lt;/div&gt;
You can shorten that code a bit, and then, by using rgba(), you can have both transparent background and image in one pseudo, and using attr() together with the second pseudo, display the text.

The 4th argument in rgba() is the opacity level.

Stack snippet



.component {
 min-height: 100vh;
 min-width:100vw; 
 font-size:5em;  

 display:flex;
 justify-content: center;
 align-items: center;  
 color:black;
}
.component::before { 
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%; 
 height: 100%;
 opacity:1;
 background: rgba(0,255,0,0.3) url("https://www.pngarts.com/files/5/Los-Angeles-Free-PNG-Image.png") center 100px/500px repeat; 
}

.component::after { 
 content: attr(data-text);
 position: relative;
}
&lt;div class="component" data-text="Awesome WebPage"&gt;
&lt;/div&gt;






If you intend to use something else inside the component, and to avoid using negative z-index on the pseudo (which can cause other issue when it comes to the stacking context), use e.g. a div and give it position: relative and it will float on top of the pseudo.

Stack snippet



.component {
 min-height: 100vh;
 min-width:100vw; 
 font-size:5em;  

 display:flex;
 justify-content: center;
 align-items: center;  
 color:black;
}
.component::before { 
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%; 
 height: 100%;
 opacity:1;
 background: rgba(0,255,0,0.3) url("https://www.pngarts.com/files/5/Los-Angeles-Free-PNG-Image.png") center 100px/500px repeat; 
}

.component div { 
 position: relative;
}
&lt;div class="component"&gt;
  &lt;div&gt; 
    Awesome WebPage
  &lt;/div&gt;
&lt;/div&gt;






If you want to alter the opacity on the background color and the image individually, you will need both pseudo, and here's how-to.

As the div will become before the ::after pseudo, markup wise, we need to give it z-index: 1 to "float" on top. Note, this is not as bad as using a negative z-index on the pseudo.

Stack snippet



.component {
 min-height: 100vh;
 min-width:100vw; 
 font-size:5em;  

 display:flex;
 justify-content: center;
 align-items: center;  
 color:black;
}
.component::before,
.component::after { 
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%; 
 height: 100%;
 opacity:.3;
 background: green; 
}

.component::after { 
 opacity:.7;
 background: url("https://www.pngarts.com/files/5/Los-Angeles-Free-PNG-Image.png") center 100px/500px repeat; 
}

.component div { 
 position: relative;
  z-index: 1;
}
&lt;div class="component"&gt;
  &lt;div&gt; 
    Awesome WebPage
  &lt;/div&gt;
&lt;/div&gt;