Noob Question- Background Scrolling

HTML & CSS
1

Hey,

Basically, i have a background image of a site i am making. However it does not scale to the width of the whole page. I could easily make it scale to that size, but if someone had say, a 42" television they were viewing it on, with a higher resolution, would the sides become visible? Bad example but take

http://www.wow-europe.com (random pick)

their background always fits the page, no matter what browser or resolution you are using.

I’ve found tons of code to fake stretch the background image, but then the background image does not scroll down, it remains in the same place no matter how much content is added.

Sorry if i dont make much sense, its 4 am :L

2

The site you linked to has a background image that fades to black around the edges (http://eu.battle.net/wow/static/images/layout/body-bg-baked.jpg), so it doesn’t “scale” as such. That’s best way to go, if your image suits this. The black around the edges of the image matches the black background color:

body {
  background: #000000 url("../images/layout/body-bg-baked.jpg") no-repeat scroll 50% 0 ;
}

Otherwise, there are some scripts available that resize an image so that it always fills the background, such as Supersized.

EDIT:

PS, welcome to SitePoint! :slight_smile: