. Advertisement .
..3..
. Advertisement .
..4..
Opacity is a CSS property enabling coders to change an element’s opaqueness. By default, the element will have a value of 1. This value gets closer to 0 and it appears more and more transparent.
This article will introduce you to common methods to change the background image opacity in CSS.
How To CSS Background Image Opacity
Method 1: Use Positioning And A Separate Image Element
There are two elements you can rely on in this approach. The “wrap” one offers a reference point with position: relative. On the other hand, the second one is an img element appearing behind the context with stacking and position: absolute content.
Markup:
<div class="demo-wrap">
<img
class="demo-bg"
src="https://assets.digitalocean.com/labs/images/community_bg.png"
alt=""
>
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
Accompanying styles:
.demo-wrap {
overflow: hidden;
position: relative;
}
.demo-bg {
opacity: 0.6;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.demo-content {
position: relative;
}
Output:
/* Your code... */
Overall, the CSS opacity property is an ideal tool to make your desired image transparent. The property’s value ranges from 0.0 to 1.0. The 1 value is default for all elements.
The lower number means greater transparency. The image will appear invisible if the value is 0.
The only flipside of this method is the opacity level for the image and text. Transparency will affect them as well besides the image.
Method 2: Use CSS Pseudo-Elements
CSS pseudo-elements are another solution for the opacity. This method involves either :before or :after elements. Besides, in this approach, you will also use the top, bottom, left, and right properties.
They allow you to adjust and position your desired display. Thanks to them, the opaqueness of your image will not affect the text.
Markup:
<div class="my-container">
<h1>Scotch Scotch Scotch</h1>
</div>
Here is CSS:
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.my-container:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('https://placekitten.com/1500/1000');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
The method supports other background properties like background-repeat , background-size , background-position. Yet, it may conflict with other design effects. So be careful with that.
Transparency With RGBA
If you don’t want to change the opaqueness of child elements, let’s use RGBA color values. This method will set the opacity level for the background, not the text.
An RGBA color is specified with four color codes: red, blue, green, and alpha.
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
Method 4: Add An Overlay
Instead of changing the transparency directly, you can add a semi-transparent background color to offer an overlay to the image’s top.
A value of 0.25 will offer an overlay of 25% opacity.
Here is the code:
.hero {
position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-image: url('https://placekitten.com/1200/800');
background-size: cover;
}
.hero::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);
}
Text In Transparent Box
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Conclusion
This tutorial provides two methods to change the background image opacity in CSS. You should choose the suitable approach for your cases.
As CSS can be weird and tricky for beginners, don’t forget to combine its properties and other features like positioning to avoid unwanted effects. Use CSS pseudo-elements and you will get an opaque image with unaffected texts and lines.
Leave a comment