how to change opacity of background image in css

Transparent Background – Image Opacity in CSS and HTML

Transparency plays an important role in forepart end development. It lets you choose how transparent the elements on your web pages appear.

Yous can adjust transparency in several means – because of course, in CSS, there are multiple ways to practice the same thing.

The CSS opacity belongings is the first way that might come up to your listen to modify transparency. Just this holding tin can't come up to the rescue all the time, particularly when there is a background image with text in it that you want to brand transparent.

So in this commodity, I'm going to show you the various means you tin arrange transparency so you can start implementing it in your coding projects.

Image Transparency with the CSS Opacity Property

To brand an image transparent, you lot tin use the CSS opacity property, as I mentioned above. The bones syntax of the opacity belongings is shown in the lawmaking snippet below:

                selector {           opacity: value;       }

The opacity property takes values from 0.0 to 1.0, with ane being the default value for all elements. The lower the value, the more transparent. Then if an element is given an opacity of 0, information technology would be invisible.

Y'all can find examples of different opacity values in the lawmaking snippets beneath:

                <img src="freecodecamp.png" alt="freecodecamp-logo" />

I have added some CSS to heart everything on the folio:

                body {         brandish: flex;         marshal-items: center;         justify-content: middle;         margin: 0 auto;         height: 100vh;       }    img {         opacity: 1;       }

An opacity value of 1 is the default, so the prototype appears like this:
default-opacity

                img {      opacity: 0.5;    }

This code gives the states 50% opacity, and y'all can see that the logo has faded a bit:

half-opacity

                img {         opacity: 0;       }

With an opacity of 0, the image is 100% transparent, so information technology becomes invisible:

zero-opacity

The only manner to exist sure the image is on the folio is to inspect it with your browser devtools:

image-in-devtools

You tin can utilize this opacity value to practise a lot of things – for example, you tin can use it to include text over a hero image on a website.

You might be wondering why you would want to make content invisible with an opacity value of 0. Well, it can be useful in animations, and in edifice HTM + CSS + JavaScript games as well.

You'll definitely want to utilize CSS positioning to help you align things. I'll discuss this in the next parts of the article.

Groundwork Prototype Transparency in HTML and CSS

CSS offers a way to set the background paradigm for a container element with the background-image holding, so you don't necessarily have to practice information technology with the CSS. This means you lot can also place text in the container too.

                <div class="showcase">       <h1>A group of ring-tailed lemurs</h1> </div>

                torso {       display: flex;       align-items: center;       justify-content: center;       margin: 0 auto;       height: 100vh;     }     .showcase {       background-image: url("ring-tailed-lemurs.jpeg");       peak: 400px;       width: 500px;       groundwork-position: eye;       background-repeat: no-repeat;       background-size: cover;       opacity: 0.6;     }

The downside of this approach is that the opacity is set for the container where the image and text are. So, the opacity affects the text besides, not but the prototype. This is probably not what you want!

css-opacity

The solution

Past default, when you use an opacity to a container, the descendants inherit it as well.

A workaround in this situation is to fix the groundwork image in the HTML. This makes it easy to apply the opacity to the image only, instead of setting the background image for the container in the CSS.

This time around, the paradigm and the text will be separated, so the text will not inherit the value gear up for the opacity.

This ways y'all as well have to use CSS positioning to align the text within the image.

                <div course="showcase">    <img src="ring-tailed-lemurs.jpeg" alt="lemurs" class="bg-image" />     <h1 class="bg-img-title">A grouping of band-tailed lemurs</h1> </div>

                body {       brandish: flex;       align-items: center;       justify-content: center;       margin: 0 auto;       height: 100vh;     }     .showcase {       position: relative;     }      .bg-epitome {       opacity: 0.7;     }      .bg-img-championship {       position: absolute;       top: 420px;       left: 20px;     }

In the CSS code snippet above, I use flexbox to centre everything on the folio.

The container div element with the grade of showcase is positioned relative, and so you can position the h1 text absolute within information technology. This will push the h1 text to the top-left corner of the image. The superlative and left properties are and so used to push the text to the bottom-left corner of the paradigm.

If you are wondering what the elevation and left backdrop are, they are the properties you get access to when you apply the display property.

In addition to these two, yous besides get admission to the right and bottom properties. They let yous position an chemical element anywhere.

In the end, the prototype is opaque and the text is not affected:
right-opacity

Decision

In this article, y'all learned how to employ the opacity property of CSS to brand images transparent.

Every bit CSS remains tricky and a scrap weird, it'southward helpful to combine the opacity property with other CSS features such equally positioning in guild to put it into proper use.

Autonomously from CSS positioning, yous can also use the opacity belongings with CSS pseudo-elements such as ::before and ::later, which is sort of a hacky way of doing things.

Cheers for reading, and keep coding.

Learn to lawmaking for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started