Black Image with black Text is the issue here… add the Color: white in css
body {
background-image: url("https://wallpaperaccess.com/full/396538.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.text {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotoi Sebastian | Front-End Developer & Web Designer</title>
</head>
<body>
<div class="text">
<h1>Sebastian Hotoi</h1>
</div>
</body>
</html>
I would avoid making the body position absolute.
If you want the background behind the heading that should be the default without making it absolute our using any z-index. Make sure it is not a case of the image being the same colour as the text and just making it look like it is not there 🙂
The h1 goes behind the background-image. I’ve tried using z-index and position:absolute and relative but nothing changed. How do I make the background image to remain a background forever without having to make every other element to be added on top of it?
body {
background-image: url("https://wallpaperaccess.com/full/396538.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotoi Sebastian | Front-End Developer & Web Designer</title>
</head>
<body>
<div class="text">
<h1>Sebastian Hotoi</h1>
</div>
</body>
</html>
There must be an issue that we cant recreate. If you put a background-image to the body it is in the background. If the text doesnt show up its most likely not behind the image. it doesnt get displayed at all
I’ve removed position:absolute but it still doesn’t make the text to appear over the background. Am I setting up the background incorrectly? Shouldn’t the image be in the body via css?
This sounds stupid to ask but are you sure the heading is behind? Can you provide a jsfiddle for us to see?
uhm… your image is black.. and the text is black. its there you just cant see it 🙂
