SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Noob Question- Background Scrolling

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The site you linked to has a background image that fades to black around the edges (http://eu.battle.net/wow/static/imag...y-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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •