Background Image Opacity Fake Trick with CSS

Supplemental 152 views
0 Flares 0 Flares ×

There is actually no such thing as “Background Opacity” but you can fake it with this CSS. Make the div behind the same size as the one in front and give the div behind a lower z-index and an opacity.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
Posted in CSS, Uncategorized


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.


Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×