CODEWITHSUNDEEP
htmlcss
Altimus Prime
Altimus Prime

Reputation: 2327

HTML CSS height 100% only goes as tall as the screen resolution, not the body height

I can't figure out how to make my seasonal overlay div the full height of the html. Right now its the height of the screen, but scrolling down cuts off part of the image. Does anyone know the right way to make the sesasonal overlay div extend the whole height of the html? The div is part of a server side include so I can't close the underlay div after my content. Also, half my closed online sales don't use javascript, so it needs to be an html/css solution please.

You can save time from reading below by just seeing my JSFIDDLE.

Thanks.

CSS:

html{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
    background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
    background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
    margin:0px;
    padding:0px;
    min-height:100%;
}

body{
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    min-height:100%;
    display:block;
}

.background-overlay-season
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    width:100%;
    background-image:url(http://sonosmile.com/images/fall.png);
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    min-height:100%;
    display:block;
}

HTML:

<html>
<body>
<div class="background-overlay-season"></div>
a bunch of content....
</body>
</html>

Upvotes: 4

Views: 2718

Answers (4)

Akhil
Akhil

Reputation: 967

Move the content of the div .background-overlay-season to body.

body {
    background-image: url("http://sonosmile.com/images/fall.png");
    display: block;
    left: 0;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

Upvotes: 0

Serlite
Serlite

Reputation: 12258

Hmmm, I think I may have an answer for you.

Remember that when using position:absolute, the element ends up being relative to the first ancestor element it encounters with position:relative. Should one not exist, the container will be considered the <html>. So why doesn't <html>, and hence .background-overlay-season go to the bottom of the document?

You have to consider what the min-height: 100% you specified on <html> is actually relative to; what exactly is it 100% of? The behaviour suggests that it is actually relative to the browser viewport's height, so the <html> (and any element using it as a reference for height) can be guaranteed as tall as the viewport. As a result, you'll actually want to make <body> the container, not <html>, with a simple addition to your CSS:

body{
    position:relative;
}

Here's a JSFiddle showing what this achieves. Note that .background-overlay-season extends to the bottom of the document now. If this isn't what you were looking for, let me know and I'll be happy to (try) helping further! (This was a bit of a learning experience for me too, haha...)

Upvotes: 2

davidpauljunior
davidpauljunior

Reputation: 8338

Right, I think I've found it.

Firstly, I think the image should be set on the body, but you said that didn't work in IE, and you were right.

If we remove the filter from the html CSS and the body background-image appears, but obviously that's not too helpful as we've lost the gradient in IE. Ok. So, trying to find out why, I tested creating a new gradient from Colorzilla. When I put that in, it worked:

background: #c5ceff; /* Old browsers */
background: -moz-linear-gradient(top,  #c5ceff 0%, #f8d0fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5ceff), color-stop(100%,#f8d0fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c5ceff 0%,#f8d0fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5ceff', endColorstr='#f8d0fd',GradientType=0 ); /* IE6-9 */

Great. But why? After some debugging, it turns out that unless you specify the first background (background: #c5ceff; /* Old browsers */), it won't work, the background on the body just won't show. And it's not just a background-image, it won't work for a solid color either. No idea why.

But there you go. Here's your new CSS, with your leaves background-image on the body, and working in IE.

html {
  background: #c5ceff; /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
  background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
  margin:0px;
  padding:0px;
}

body{
  margin:0px;
  padding:0px;
  background:url(http://sonosmile.com/images/fall.png);
}

http://jsbin.com/eBOcuLE/4/edit

Note that I removed all your styling for the empty div. Using that div as your background won't work, because although you can make it 100% height, it will only be the height of the viewport. It has no content in it, so it has no idea that the page content is going longer that the viewport.

Upvotes: 2

Sachin Jain
Sachin Jain

Reputation: 21842

If you want background-image on all your body, you can use this

body
{
  background-image: url(http://sonosmile.com/images/fall.png);
  background-size: contain;
}

Try this fiddle

Upvotes: 1

Related Questions