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,097
    Mentioned
    448 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!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •