CSS: Keeping background scroll

I have a problem. My css body background looks like this:

background: url(../doubletwo.jpg) top center repeat-x #000; 
backg开发者_运维百科round-attachment: fixed;

doubletwo.jpg is 8px × 580px now im starting adding more content to my site, and after the 580px has ended, it displays the color #000.

I want to like keep the background STUCK and should not scrolling with the site, so the pixels of the heigh ends and it shows #000.. how can i solve this? As you see i tried background-attachment: fixed; but i dont know if its right, but it doesnt seem to as it dont work..

CSS: background image does not fill when scrolling

"I had the same problem and it is annoying. Problem for me was that I could not change the HTML, only the CSS, so I couldn'y remove the additional divs.

The problem as I see it is that the backgrounds have "width: 100%" and the container has "width: 900px". So, for example, if the browser window is 800px wide, the backgrounds are set to 800px and, therefore, when you scroll the window horizontally, you get the areas without the background.

Another way to fix the problem is to remove the "width: 100%" from the backgrounds and replace it with a "min-width: 900px", thus forcing the backgrounds to be always at least the same width as the container. When the window size becomes less than 900px, the backgrounds always remain at the same with as the container. Works a treat."

I am assuming you have the background on the body css selector. You need to set the overflow to scroll.

body
{
    background: url(../doubletwo.jpg) top center repeat-x #000;
    overflow:scroll;
}

That will stop the body for growing beyond the screen and then your content will scroll inside the body.