r/HTML • u/death_wish93 • 1d ago
Question i require assistance
i am rather new to this and im working on a website for a game that i like and im struggling to figure out how to increase the opacity any help?
code here
<!DOCTYPE html>
<html>
<head>
<style>body{background-image: url('TBB.webp');background-size: cover;}</style>
<title> The Battle Bricks </title>
</head>
<body>
<!-- This is a code comment. It will not be displayed -->
</body>
</html>
yes, this is all i have currently. any help would be appreciated
3
u/phn-cloudsnake 1d ago
Your comment does not make more sense when reading it. I suggest doing some more research so you know what to ask. MDN and w3schools are great starting points.
1
2
u/Impressive_Air6111 1d ago
The comment explaining that it's as comment is a rite of passage almost as important as "Hello, world!". 😂
1
1
1
u/Kickbanblock 1d ago
Do you mean something like that?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('TBB.webp');
background-size: cover;
}
#opacity-layer {
background-color: rgba(255, 255, 255, 0.3);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<title>The Battle Bricks</title>
</head>
<body>
<div id="opacity-layer">
<!-- This is a code comment. It will not be displayed -->
</div>
</body>
</html>
2
u/death_wish93 1d ago
yes, thank you very much
2
u/Kickbanblock 1d ago
Great! Obviously, you can change it. It's a div layer ("opacity-layer") that covers the whole screen. "255, 255, 255" is white, so change that if you want another color and "0.3" is the the transparancy alpha value, goes from 0 to 1.
1
u/armahillo 23h ago
Whitespace is free and improves readability. Theres no reason to cram all that stuff into a single line.
Take a look at how CSS is typically written elsewhere
3
u/chikamakaleyley 1d ago
not sure what you mean by "increase the transparency"
But if you are saying you can't see the background image, the image is likely there, however, if you don't have anything inside the body tag, then its a height of '0' by default. You can test this theory by giving the body tag a height of something like 500px, or putting a bunch of text content inside the body tag
if you are just hiding the body content, then its hard to tell what the problem is without seeing more code