I'm designing a webpage that requires a background image with a semi-transparent black overlay on top (rgba 0 0 0 0.5).
Originally, I tried this approach:
<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);">
At first, it seemed to be working fine. However, as I started developing larger pages for the site, I noticed that when scrolling down, the semi-transparent cover does not move along:
https://i.sstatic.net/9jxMo.png
I searched online for a solution but couldn't find any relevant discussions.
Does anyone have any suggestions for solving this issue?
Here is the full code (includes Bootstrap 5):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="./css/custom.css" rel="stylesheet">
...
</head>
<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);">
...
</body>
</html>
CSS:
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
...
@media (min-width: 576px) {
.game-col {
border-left: 1px solid var(--white-color);
}
.game-block {
border-bottom: 1px solid var(--white-color);
}
.game-top {
border-top: none;
}
}
...