SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Full Width Background images?

    Hey folks,

    I was wondering what the best way to get a full page width background image would be? Where it would expand / contract as the browser does. Two example sites where you can see what I mean are: http://www.shopify.ca/ and https://www.airbnb.ca/, as well as many others. If you look at the background image (not the entire site background, but just a small portion of it) they have it display nicely in the back and as you move the browser window, adjust size, etc, it stays intact (even though it may contract, etc).

    Thanks,

    Elementax

  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)
    You can do this with JavaScript or with CSS3. What range of browsers do you need this to work in?
    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."

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can do this with JavaScript or with CSS3. What range of browsers do you need this to work in?
    I'd prefer to get it to function in basically all the major browsers if at all possible (even IE 7/8 if it is possible as well)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,270
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Elementax View Post
    Hey folks,
    Two example sites where you can see what I mean are: http://www.shopify.ca/ and https://www.airbnb.ca/, as well as many others.
    Thanks,

    Elementax
    Hi,

    One of those is just a very large image centred in the background and doesn't actually scale. It's just faded out at the edges. The other one does scale but doesn't work in ie8 and below.

    If you are using jquery already then I've used backstretch before and it works on Ie7 without problem.

    Or you could just go the css3 route and used background-size for good browsers and let older browsers just have a centred image. Chis Coyier has a round up here that you will find useful.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    One of those is just a very large image centred in the background and doesn't actually scale. It's just faded out at the edges. The other one does scale but doesn't work in ie8 and below.

    If you are using jquery already then I've used backstretch before and it works on Ie7 without problem.

    Or you could just go the css3 route and used background-size for good browsers and let older browsers just have a centred image. Chis Coyier has a round up here that you will find useful.
    Ah thanks a lot, they both seem quite useful, especially Backstretch, I'll probably take a closer look into that.

    Thanks,

    Elementax


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
  •