How to fill the side area behind the scrollbar with background?

Question

css

There is a CSS code for the element:

#top {
  width: 100%;
  height: 170px;
  position: relative;
  background-image: url('images/top_gradient.png');
  background-repeat: repeat-x;
  background-position: bottom;
}

If the window size is larger than the site size of 1024px, then everything is OK, the element is stretched from above to the entire width of the window and painted black. If the window size is smaller, a horizontal progress bar appears. If you drag it to the end, it comes out like this:

And I want it to be to the end.

How to fix?

Answer 1

jsfiddle.net/q7aPX/
Relative elements depend on their parents and won't overflow.
Become as the person described above, absolute, and check that no one has a relative or absolute in the chain of parents, otherwise it will again be attached to that parent.

Answer 2

You can set min-width:

body {
    min-width: 1024px;
}

Answer 3

If there is nothing else in the block, then

#top {
    height: 170px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background-image: url('images/top_gradient.png');
    background-repeat: repeat-x;
    background-position: bottom;
}

If there is something in the block, then try to wrap it in a block with position: relative.