CODEWITHSUNDEEP
htmlcss
Hopeless Coder 99
Hopeless Coder 99

Reputation: 5

Background not covering whole display screen?

I am having trouble with my background covering the whole page vertically, as it is only halfway now. This is what I am currently doing, and I am not sure why it is not working.

<div class="bg">
  <div class="container">
    some more code here
  </div>
</div>

And in my CSS I have:

body, html {
 height: 100%;
}

.bg {
 background-image:url(myimage.png);
 background-height: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

I have also tried a few solutions from previous posts on here to no avail.

Thank you for your time.

Upvotes: 0

Views: 39

Answers (2)

trcharbo
trcharbo

Reputation: 23

Unfortunately I can't comment, so I'm offering this answer as further help (although it doesn't answer your question):

You can take those background properties and use shorthand to place them all into one line, instead of separates. That would look like: 

.bg {
   height: 100%;
   background: url(myimage.png) no repeat cover center;
   }

Upvotes: 1

Mike Diglio
Mike Diglio

Reputation: 735

Your bg class will need a height value, otherwise it will only be as tall as the content that fills it.

Also, background-height is not a valid property.

body, html {
 height: 100%;
}

.bg {
 height: 100%;
 background-image:url(http://www.fillmurray.com/800/400);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

Change the image to your image and you should be good. See the attached fiddle.

https://fiddle.jshell.net/krqvhymn/

Your can also give your container class a height value. Depends on what you are looking to do

Upvotes: 1

Related Questions