Background image is cut off at bottom or right when scrolling viewport

Question

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:

The code:

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?

score 0 · Answer 1 · answered Dec 17 '15 at 14:23

You've got repeat-x value defined, then the background only repeats in the X axis (horizontally).

To solve this you've got two different solutions for two different purposes.

You can put repeat value to repeat in X and Y axis, but this have a problem because your background is a gradient, and if you repeat it in Y axis the visual effect will be bad.

The other solution (in my opinion the best solution) is to define that background covers the whole element. This can be achieved with the property background-size: cover.

The change will be that:

 body {
    background:url(bg.jpg) repeat-x; 
    background-size: cover;
 }

Tell me if this solves your problem.

Exists another solution with the background-attachment property. It can be defined as fixed value and the scroll doesn't move the background.

 body {
    background:url(bg.jpg) repeat-x; 
    background-attachment: fixed;
 }

score 0 · Answer 2 · answered Dec 17 '15 at 14:31

0

Try these background styles:

background: url(bg.jpg);
background-position: 100% 100%;
background-size: cover;

answered Dec 17 '15 at 14:31

Chris

4,277
7
40
55

score 0 · Answer 3 · answered Dec 17 '15 at 14:41

Since repeating a gradient doesn't look that good, I guess you just want that background alwas cover your whole viewport and not scroll with it? That would be done with no-repeat and cover, like this:

body { 
  height:100%; 
  padding: 0; 
  margin: 0; 
  background:url(bg.jpg) no-repeat fixed; 
  background-position: bottom;
  background-size: cover; 
}

ClaudioChametla · Answer 4 · 2022-10-18T17:31:36.770

You can use un a CSS property called overflow-y:auto and asign to the father component, of this way is puts a scroll bar when the viewport height reduce him size and your background image don´t cuts anymore.

Try something like this:

.father {
  height: 100vh;
  background-image: url(https://static.vecteezy.com/system/resources/previews/001/331/268/original/happy-halloween-from-the-spooky-castle-free-vector.jpg);
  background-size: 100% 100vh;
  background-position: center;
  background-repeat: repeat;
  overflow-y: auto;
}
.child {
  height: 1500px;
}

<div class="father">
  <div class="child">
    <h1 style="color: white">¡Hello World!</h1>
  </div>
</div>

score 0 · Answer 5 · answered Oct 18 '22 at 17:24

Use background-attachment: fixed on the body, like so:

html {
  height: 100%;
  color: white;
}

body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: url(https://glaring-inferno-4496.firebaseapp.com/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;
}


/*new code from here:*/

body {
  background-attachment: fixed;
}

<!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>

Background image is cut off at bottom or right when scrolling viewport

5 Answers5

Linked

Related