How To Give Opacity To Background Image In CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Amruta
In this article we will show you the solution of how to give opacity to background image in css, the Cascading style sheet or CSS is used to add style to the HTML. Opacity is a CSS property used to change an image's opacity or transparency.
We can set the opacity by a scale of 0.0-1.0. The default opacity is 1.0. Let’s see some examples of the Opacity property of CSS.
Step By Step Guide On How To Give Opacity To Background Image In CSS :-
Method 1
Let us see an example on give opacity to background image.
<!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> how to give opacity to background image in css </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
.image {
width : 200px ;
height : 100px ;
display : inline-block ;
opacity : 0.3 ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> how to give opacity to background image in css </p>
<div class="image">
<img src="bird.jpg" alt="" class="src">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- creating a <div> with the class “image” tag that containing an image.
- Now creating a <style> tag to add CSS to the HTML file
- By addressing the class image we added the opacity property by a scale of 0.0-1.0
Method 2
Now let’s see an example to see how the opacity changes while hovering on the image using mouse.
<!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> how to give opacity to background image in css </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
img {
width : 200px ;
height : 100px ;
display : inline-block ;
opacity : 0.3 ;
}
img:hover {
opacity : 1.0 ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> how to give opacity to background image in css </p>
<div >
<img src="cake.jpg" alt="" class="src">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- creating a <div> tag that containing an image.
- Now creating a <style> tag to add CSS to the HTML file
- By selecting the img tag we added the opacity property by a scale of 0.0-1.0.
- Now by using :hover tag we can see the style while hovering on the image.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give opacity to the background images in CSS.
I hope this article on how to give opacity to background image in css helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
