Scroll bar

Whenever my site is viewed at a resolution that's not enough to display the full page, a horizontal scroll bar is added. The problem is that my 100% sized div with a background image does not apply that background image to the part that is outside the scrollbar.

This same problem actually appears on Stack Overflow. If you shrink your window so that you have a horizontal scrollbar, you can see that both the div and footer areas do not expand the background image / color.

One way I decided to resolve is to set the div / footer to fixed, but then the content behind the end of the div is lost :-(

Anyone have any suggestions or workarounds? ty!


source to share

3 answers

When you set an element to 100% width, it will have the same width as its parent. By default, the width of the body tag is equal to the width of the viewport. According to the standard, when the content of the elements has to be large to fit into it, it will overflow. This is what you see.

To get around this, set a minimum width on the body tag. Something like the following, obviously change the width to whatever works for you:

body {
    min-width: 960px;




Ugly if you used something in strings

     background: url("yourdir/yourimage.jpg") repeat repeat;


Instead of a background div? It would be helpful if you also add some code for the background div



This field is the browser scroll bar that appears during resizing and makes it less visible. This can be easily fixed by adding a hidden overflow to the body. Check out # 242684



All Articles