In this article we will show you the solution of css background image transparency, 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. We can set it as by percentage also.
Step By Step Guide On CSS Background Image Transparency :-
Method 1
Let’s see an example by setting the opacity between a scale of 0.0-1.0.
<!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> CSS Background Image Transparency </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
div.background_image {
border : 2px solid black ;
opacity : 0.3 ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS Background Image Transparency </p>
<div class = " background_image " >
<img src="https://cdn.pixabay.com/photo/2021/01/23/18/08/hills-5943233_960_720.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.
- Create a <div> with the class “background_image” tag that contains an image URL.
- Now create 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
Let’s see an example by setting the opacity between 0-100 %.
<!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> CSS Background Image Transparency </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
div.background {
background-image : url('https://cdn.pixabay.com/photo/2018/12/18/21/52/new-years-eve-3883137_960_720.png');
border : 2px solid black ;
opacity : 50% ;
}
div p {
color: blue ;
font-weight: bolder ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS Background Image Transparency </p>
<div class = " background" >
<p>
this is some text
</p>
</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.
- Create a <div> with the class “background” tag that contains a <p> with some text.
- Now create a <style> tag to add CSS to the HTML file
- Adding the <div> a background image containing an image URL.
- By addressing the class image we added the opacity property by a scale between 0-100 %.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give CSS background image transparency.
I hope this article on css background image transparency helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
