How to set the opacity of background image in CSS ?
In this article, we are going to see how to set the opacity of a background image in CSS. Opacity can be defined as the quality of lacking transparency. It can be used to define the amount of content to be visible.
Approach: We can use the opacity property in CSS which is used to change the opacity of an element. The value of the property can be set in a range of 0 to 1, where “0” is fully transparent and “1” is opaque. Any decimal value can be used in between to set the opacity accordingly.
Syntax:
opacity: value;
Example: In this example, we will set a background image to the <div> and use the opacity property to set the opacity of this image. The opacity is set to 0.2 so that the background is made transparent and the text on top of the image is clearly visible.
HTML
<!DOCTYPE html><html> <head> <title> How to change opacity of background image in CSS ? </title> <style> #GFG { height: 100vh; display: flex; align-items: center; justify-content: center; } #GFG::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; /* Specify the background image to be used */ background-image: url( background-size: cover; /* Specify the background image */ opacity: 0.2; } </style></head> <body> <div id="GFG"> <h2>Background image with opacity</h2> </div></body> </html> |
Output:
Please Login to comment...