CSS Background Image Opacity Without Affecting Text
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Riya
In this tutorial we will show you the solution of css background image opacity without affecting text and we will learn about how to reduce opacity of background of image without affecting text using css.
As we know css used to style html elements, here we used css internal method to reduce background image opacity and it can’t affect text visible.
In css we have option to separate background and text so we can use that style to keep our text without any affects.
Step By Step Guide On CSS Background Image Opacity Without Affecting Text :-
In our program we sets background image using ‘background-image’ property to div element and background with size ‘width-100%, height-30rem’ and using ‘opacity’ property with value ‘0.2’ reduce the visible of background image.
Then we know each elements defined in body block had default relation between them is ‘position:relative’.
So when add new element below another element it will display as like order wise on webpage.
Now we need to change position value to ‘absolute’ so div is separated from h1 and that’s way opacity not affects h1 tag.
<!DOCTYPE html>
<html>
<head>
<title>BACKGROUND OPACITY WITHOUT AFFECT TEXT</title>
<style>
h1,body{margin:0;}
div{ background-image: url("bg.jpg");
width: 100%;
height: 30rem;
opacity: 0.2;
position:absolute;
}
</style>
</head>
<body>
<div></div>
<h1>HELLO EVERYONE</h1>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- In <style> tag we defined h1, body style property of ‘margin’ value ‘0’ to avoid unnecessary gaps in webpage.
- Then we defined style for div element, we sets ‘background-image’ and width and height of element size is ‘100% and 30rem’ and the opacity of background sets to ‘0.2’.
- After that initially h1 text opacity also reduced because both had same relation of style ‘position:relative’ so we needs to change background style to ‘position:absolute’. So background relation is changed with h1 text now it’s opacity returns to normal state.
- When user gives opacity value to ‘1’ it refers normal opacity if sets opacity value to ‘below than 1’ it will reduce opacity it affects background so we can’t see clear background.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we sets background image on div element and defined <h1> tag with some text will display on webpage when we load on browser.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to set background image opacity without affecting text.
Usually we defining each element’s in body block have relation between them that’s way they are display on webpage in some order wise.
So when we do changes on opacity or blur something it will affects other elements also.
In this situation we needs to separate other elements from this effect using ‘position:absolute’ only.
Finally we gets result of without affects.
I hope this tutorial on css background image opacity without affecting text helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
