CSS: Semi-transparent background and an image
13,685
Solution 1
background-color
is placed underneath background-image
, not above it (when rendered in the web-browser). To put a semi-transparent white block over an image, you will need to place another different HTML element on top of it with background-color
.
Solution 2
You can use the css "before" pseudo class to create the white overlay and place before all the content in your DOM. Add z-index:-1 to ensure it doesn't sit on top of other elements:
body {
background: url("image.jpg");
}
body:before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
Author by
Juicy
Updated on June 04, 2022Comments
-
Juicy almost 2 years
body { background-image: url('cloud.png'); background-color: rgba(255, 255, 255, 0.6); }
I tried using the above to produce a semi-transparent white background above a background-image. It doesn't work, only the background image is shown and the background-color appears to be ignored. How can I adjust the opacity of a body background image?