in

WTFWTF

How to Change a Background Image’s Opacity with CSS?

background image opacity

One of those weird situations you will bump into as a web developer is having to change the opacity of a background image. There are multiple ways of doing this with CSS3 but I will show you the easiest way to change the opacity of a background image in this tutorial.

Now, as far as I know, there’s not a property called “background-opacity”. Hopefully in the future, they will have something for this but for now, let’s look at this CSS trick.

Let’s say we have a box with text inside and we give it a background image.

<div class="box">
    Text
</div>
.box{
  height: 300px;
  width: 300px;
  background: red;
  overflow: hidden;
  background-image: url('https://fresh.codingphase.com/wp-content/uploads/2019/10/pexel.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Then we try to change the opacity of the box

.box{
  opacity: .5;
  height: 300px;
  width: 300px;
  background: red;
  overflow: hidden;
  background-image: url('https://fresh.codingphase.com/wp-content/uploads/2019/10/pexel.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Now when we change the of the opacity on the box it will also change the opacity of all the contents inside of it.

So if we wanted to change the background image opacity the best way is to treat the background image and the content separate.

<div class="box">
  <div class="box-background"></div>
  <div class="box-content">
    Text
  </div>
</div>

Now what we will do is use position relative on the box and then have the background to be position absolute. Make sure the background is taking the whole space of the box by doing width and height 100% then move it to the top left by setting it to zero. Finally, change the opacity to the background image to .5 we also want the z-index to be at 1 so it can be behind the box-content.

The box content will be the content area inside the box and we will use the same things we did for the background but the only difference is we are going to change z-index to 2 so it can be on top of the box-background image.

.box{
  position: relative;
  height: 300px;
  width: 300px;
  background: red;
  overflow: hidden;
}
.box-background:before {
    width: 100%;
    height: 100%;
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0.5;
    background-image: url('https://fresh.codingphase.com/wp-content/uploads/2019/10/pexel.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.box-content{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    font-weight: 900;
    color: white;
}

And here you go the final result is control of the background image opacity. If you know any other CSS trick let me know in the comments. Also if you enjoyed this tutorial make sure you check out the courses at CodingPhase. Over 40 courses for $20 bucks and click here to try them out for 50% OFF.

What do you think?

Written by CodingPhase

Comments

Leave a Reply

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

Loading…

0

Comments

0 comments

Javascript Ternary Operator

Single-Line If Statement with the ternary operator in Javascript

rgb color code

RGB Color Codes You Should Know