Reputation: 51
I'd like to have my banner fill up the top of the website completely, how do I do that? There are some gaps as shown in the photo. Here is my css:
<body>
<div id="headerbanner"></div>
<div class="container">
</div>
</body>
body{
background-image: url("../IMAGES/mountain1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#headerbanner{
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
}
Upvotes: 0
Views: 118
Reputation: 3871
Try to not make the banner a background, that doesnt make sense. instead use a fixed position and manually set it to 0px top, 0px right. Consult this : https://www.w3schools.com/cssref/pr_class_position.asp
NEXT THING TO CONSIDER: Once you or your client has accessed the website, programmatically set the position, width and height depending on viewport of the client's browser. This can be accomplished with javascript, using the window.onload function.
Upvotes: 0
Reputation: 2445
It's hard to pinpoint the exact issue as you haven't provided a great detail of detail, context or code, but I believe issue is that your background image doesn't cover the container.
Try the following CSS rule
background-size: cover;
Your new CSS would be:
#headerbanner {
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
background-size: cover;
}
This should stretch the background image to fill the container, whilst retaining aspect ratio.
Upvotes: 1