Change background-image opacity

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

#7

This is an old article. Is it still good practice?

#8 
{
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(/images/background.jpg) center/cover fixed no-repeat;
}

You can change the opacity of the background image by modifying the opacity of the color since it’s an overlay on the image in this instance.
Also you can choose to use radial-gradient, might as well use different colors, i bet you get the idea already.
Just remember to always declare the background position before the bacground size(position/size), otherwise it won’t work.