Why is the background image not showing when declaring the doctype in vscode for this website, even though it appears in quirks mode?
The image can still be accessed through the link in inspect element.
I have attempted different approaches such as revising the code, changing the image, adjusting its position, and modifying stylesheet values.
Any insights on why this issue persists?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hot Beans Web - Home</title>
<link rel="stylesheet" href="stylesimages/home.css">
</head>
<body>
<div class="header">
<img src="stylesimages/logo.png" width="400px" height="100px">
</div>
<div class="bgimage"></div>
<div class="bg-text">
<h1 style="font-size:90px">We code the future.</h1>
<p>Providing rich, advanced and sophisticated IT solutions that will make your website shine.</p>
</div>
<p>asjjssj</p>
<h1><a href="https://www.youtube.com/" target="_blank">Hot Beans Web</a></h1>
<button>shshs</button>
<a href="https://www.youtube.com/" target="_blank">Link to Youtube</a>
</body>
</html>
CSS
.bgimage {
background-image:url("homebackground.jpeg");
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.header {
padding: 0px;
text-align: left;
background: #ac1b1b;
color: rgb(0, 0, 0);
font-size: 20px;
text-indent: 20px;
}
body{
font-family: 'Roboto', sans-serif;
}
.bg-text {
color: white;
font-weight: bold;
border: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: left;
}