1
\$\begingroup\$

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;
}
<div class="component">
    <div class="component_background_color"> 
      Awesome WebPage  
    </div>
</div>

\$\endgroup\$
  • 1
    \$\begingroup\$ @Linny thanks for your feedback! effectively there was a bugg in my code, I think it works now, I let my post online for futur reader to make their review if they are interested. \$\endgroup\$ – Webwoman Aug 14 at 6:03
  • 1
    \$\begingroup\$ So, the code now works, right? \$\endgroup\$ – Mast Aug 14 at 12:28
3
\$\begingroup\$

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;
}
<div class="component" data-text="Awesome WebPage">
</div>


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;
}
<div class="component">
  <div> 
    Awesome WebPage
  </div>
</div>


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;
}
<div class="component">
  <div> 
    Awesome WebPage
  </div>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.