When we opt for Background opacity property of CSS for an HTML element generally what happen is it will not only change the opacity of image in background but also reflects the opacity changes in its child elements. The default initial value for opacity is 1(100% opaque). But this tutorial will guide you how to handle this property effectively.


Watch the live demo or download code from the link given below

 


You can also refer the below opacity syntax which suits best for your requirements:

Background Opacity Syntax

opacity: 1.0  /* The default opacity where image looks complete solid. */
opacity: 0.6 /* The image will look less solid, more opaque*/
opacity: 0.1 /* The image will become nearly transparent and text gets visible more clearly */
opacity: inherit /* The default opacity of actual image/*
filter: alpha(opacity=100); /* For IE8 and below */
zoom: 1; /* Triggers "has Layout" in IE 7 and below */

 

CSS File: Style.css

The below CSS code will help you to set up background opacity property.


#main{
position:relative;
}
div#first{
background-image: url('images/wood1.jpg');
opacity:0.2;
width:300px;
height:300px;
}
div#second{
width:300px;
height:300px;
position:absolute;
top: 0;
left:0;
}

 

HTML File: background_opacity.html

Here is the HTML code.


<!DOCTYPE html>
<html>
<head>
<title>Background CSS Example </title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="first">
</div>
<div id="second">
<p id="container">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</body>
</html>

 

Conclusion: 

Generally, when the opacity is added to any div, it automatically adds opacity to all associated elements in the same div. This tutorial specifically adds opacity to just the background and not to any other corresponding element in the same div. Just follow the example and demo to add opacity to your background element.

Check out some latest blog here –