Screenshot of problem
I am encountering an issue where my banner image has a blank space before displaying the rest of the page. I have no padding for the header and cannot figure out why this is happening
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<link rel="icon" href="images/logo.png" type="image/jpg" sizes="16x16">
</head>
<body>
<header>
<nav>
<a href="index.html">Home</a>
<a href="characters.html">Characters</a>
<a href="books.html">Books</a>
<a href="tv.html">TV Series</a>
</nav>
<img src="images/banner2.jpg" alt="World of Wooster" id="banner">
</header>
<div class = "background">
<main>
<p></p>
</main>
</div>
<footer>
<p class="left">All images remain the property of the original artists.</p>
<a href="report.html" class="right">Report a problem</a>
</footer>
</body>
</html>
CSS
.background {
position: relative;
width: 99vw;
height: 100vh;
display: flex;
align-items: center;
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
align-self: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url(../images/jeeves_and_wooster_itv.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
opacity: 0.5;
}
}
header{
position: relative;
}
header nav {
position: absolute;
left: 250px;
top: 200px;
}
nav a {
color: rgb(70, 70, 70);
padding: 10px;
text-decoration: none;
font-weight: bold;
font-size: 32px;
}
#banner {
width: 100%;
height: 100%;
}
main {
position: relative;
align-self: center;
background-color: whitesmoke;
padding: 15px;
margin: auto;
height: 90%;
width: 90%;
border-radius: 10px;
}
footer {
background-color: burlywood;
padding: 15px;
display: flex;
}
footer .left {
float: left;
}
footer .right {
float: right;
margin: auto;
}
h1 {
font-family: "Playfair Display", "Times New Roman", serif;
}
p {
font-family: "Source Sans 3", Arial, sans-serif;
}
When inspecting the page with chrome I can see that the header is larger than the banner image even though I have no padding for the header. When manually setting the height of the header to the size of the image it displays correctly but this does not work for different screen sizes.
New contributor
James Kelly is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.