CSS Body background image is cut off when scrolling viewport

Question

(This is a better rephrase of my initial question - you can mark the other one as a duplicate of this one. Thanks)

I saw quite a few similar questions but could not find a fix. Open this sample and resize the browser to make its height shorter than the main div height (~400 pixels).
When scrolling down, the background image attached to the body is cut off.

html {
  height: 100%;
  color: white;
}
body { 
  height:100%; 
  padding: 0; 
  margin: 0; 
  background:url(bg.jpg) repeat-x; 
  background-position: bottom;
  background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
  height:100%;
}
#divHeader { 
  width:100%; 
  height:115px; 
}
#divMain {
  width:600px;
  height:400px;
  border: solid 1px brown;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="pageWrap">
      <div id="page">
        <div id="divHeader">Header</div>
        <div id="divMain">Main</div>
        <div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
      </div>
    </div>
  </body>
</html>

I tried to move the background image to the pageWrap div as someone suggested. It solves the vertical scroll problem, but creates a similar problem horizontally: When the window is too narrow and you scroll left, the image is cut off on the right.

Any real solution?

Have you given any thought to just styling the background color using css? It would eliminate that completely? — Tony, Dec 17 '15 at 14:16

score 3 · Answer 1 · answered Dec 17 '15 at 14:22

3

Perhaps you could remove the height:100% from HTML, BODY and #page, and then set background-color on the body to #3E3E3E (in this example).

The difference is that the background image would not stretch all the way down, but it would remove the scrolling problems.

Height:100% only applies to 100% of the height of the browser window, not the height of the page within the browser window - that's why you;re getting the white area below when you scroll down.

answered Dec 17 '15 at 14:22

alanvitek

167
3
11

Thanks your answer is good but I accepted Sidney's answer as it refers to my specific case of a gradient background, and adds the cool CSS hint. – Gil Dec 21 '15 at 14:27

score 1 · Accepted Answer · answered Dec 17 '15 at 14:26

I would suggest replacing your background image with a CSS gradient, this might seem difficult but there is a fantastic tool that does it all for you (they also show a browser support table below the tool!)

The output CSS for a gradient that you'd want looks like this:

background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(204,204,204,1) 96%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

Furthermore, you might want to remove height: 100% on the html and body for min-height: 100% since you'll want this gradient to stretch out over the length of this page.

The reasons you'd want to use a gradient over an image is just purely because it replaces a request to a ~100-300kb image with no request and only ~100-300b added to your CSS which I think is a good trade off against almost any criteria.

The tool also has support for importing an image, you can basically take your image, upload it and get a gradient out of it that comes closer to a perfect result than you could ever do by hand.

Thanks I accepted your answer and adopted the method. – Gil Dec 21 '15 at 14:27 — Gil, Dec 21 '15 at 14:27

CSS Body background image is cut off when scrolling viewport

2 Answers2