The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
The opacity property
The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.
opacity : <alpha-value> /* number | percentage | inherit */A <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.
How to change a background image’s opacity
Create a div element with the background image. Define CSS rules for the div element. The div element shows a background image.
Edit your CSS code.
#main_bg {
background-image: url(./images/demo.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
width: 100%;
}Add a div element with the background image.
Edit your HTML code.
<div id="main_bg"></div>Add an overlay with the opacity.
Edit your CSS code.
#main_bg::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.9;
z-index: 1;
background-color: white;
}Add content inside created element.
Update your existing HTML code.
<div id="main_bg">
<div class="content">Foreground content</div>
</div>Make the content visible.
Edit your CSS code.
.content {
z-index: 10;
position: relative;
}Here is a complete example. You can save it as an index.html file. This example contains 3 demo screens. The middle one is an HTML element with a background image and opacity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
width: 100%;
background-color: brown;
}
#main_bg {
background-image: url(./images/demo.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
width: 100%;
}
#main_bg::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.9;
z-index: 1;
background-color: white;
}
.content {
z-index: 10;
position: relative;
}
</style>
</head>
<body>
<div class="page"></div>
<div id="main_bg">
<div class="content">Foreground content</div>
</div>
<div class="page"></div>
</body>
</html>
