CODEWITHSUNDEEP
css
Learning2code
Learning2code

Reputation: 51

Banner not fully covering top

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;
}

enter image description here

Upvotes: 0

Views: 118

Answers (2)

Max Alexander Hanna
Max Alexander Hanna

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

Adam McKenna
Adam McKenna

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

Related Questions