how to create a fade in a background image using css

how to create a fade in a background image using css

Notice the image above. Its a background image with a fade or something applied on top of it (What is the proper term for this I don't think its fade)

How do we create that using CSS?

Hugs and kisses and giggles for you

Try this

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
  text-align:center;
}

div::before {
  content: "";
  background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/009/940.jpg');
  background-size:contain;
  background-repeat:no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
<div>
   <h2>Earth</h2>
</div>

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image