Change background-image opacity

Curriculum Help HTML-CSS
#1

Hey!
I have this code:

  .title {
    background-image: url("cute-little-angel-with-closed-eyes-with-wings-vector-18840084.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px;
  }

And a text on top of it.

How can I change the image opacity?

#2

Check out this solution using a pseudo-element:

#3

HTML

<span class="title">Hello World</span>

CSS

.title {
    position:relative;
    display:inline-block;
    padding:100px;
}
.title:before {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:-1;
  opacity:0.5;
  background-image: url("https://picsum.photos/id/439/200/200");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

JSFiddle:
https://jsfiddle.net/SupunKavinda/L7d5v3jn/4

#4

Thank you, that helped! Also how can I change the size of the image now?

#5

You can change the width by adjusting padding of .title. And, you can change the opacity by changing opacity in .title:before

1 Like
#6

This didn’t work for my background image. I wonder why that is