SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using a background image on <body> element

    hello again SP,

    lately i have been using templates BUT i wanted to do a custom job for someone's restaurant.

    i wanted to have an image be the background for the <body> element and then lay everything out over the image and use .png transparency to darken certain areas for text, nav and logo.

    what would be the ideal size for the image? i know iMac has a widescreen resolution of 2560x1440. i was thinking of just going with a pic size of regular old widescreen at 1600X900.

    also, if someone has experience in this can someone point out and issues or problems i might have in advance?

    finally, CAN SOMEONE PLEASE give me some websites that have done this very beautifully so i can get all inspired and whatnot.

    thanks...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    To be honest, I think trying to make an image big enough to fit any viewport is a mistake. If possible, it's better to fade out the image at the edges so that it merges with the background color, as then you don't have to fret about the image's edge showing on wide screens, and don't force everyone else to download a much bigger image than they need.

    You can use JavaScript to fit a background image to any screen size, but I'm not a great fan of that either.

    When CSS3 is widely supported, life will be a lot nicer. Currently a few browsers support CSS3 background resizing, and there's a great article about it at A List Apart. As you see from the examples in this article, on supported browsers the image is full size, while on non-supporting browsers there is a tasteful background color to complement the image. From memory, I think their background image width is around 1280px, which is pretty fair.

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,822
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Yeah, wot Ralph said.

    An image that fills the screen at large resolutions is going to be pretty huge, that's a lot of bytes to make everyone download, given that most people won't need anything near that size, and a lot of bandwidth used up on your account.

    I hope your page itself isn't going to stretch beyond the width available on a 1280px screen, because that's just too wide for most people to comfortably read and interact with on a typical site. With that in mind, you don't need to make your background image any wider than that, but try to end it cleanly - maybe a fade out to background colour, or maybe a border/shadow effect - so that it looks deliberate rather than just the edge of the canvas. People will focus on the content of the site that is over the background image, and even if they have a maximised window on a huge screen, are unlikely to even notice the white (or other colour) stripes down either side.

  4. #4
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all great things i will implement. however,

    anyone have any nice sites that are currently doing this?
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  5. #5
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Newcastle, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally it's best to use an image that will either tile seamlessly (if it's a texture or pattern of some sort) or turn to a solid colour at the edges, but if your image won't tile perfectly then don't tile it at all as that would just look even worse.

    As for inspiration:

    The Staff Republic site has a background image that resizes with your browser.

    The background on this site doesn't tile or even fill the screen but it has rough edges so it's not just a rectangle on a dark background.

    Google something like "website showcase background images" or something you're sure to find a load more.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    anyone have any nice sites that are currently doing this?
    The ALA article I linked to has several nice4 examples, such as this:

    http://www.alistapart.com/d/supersiz...se/index4.html

  7. #7
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks everyone...

    now let me disappear from earth for about 4 days and get this done
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  8. #8
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The ALA article I linked to has several nice4 examples, such as this:

    http://www.alistapart.com/d/supersiz...se/index4.html
    this example is not stretching across the width of Internet Explorer Browser
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  9. #9
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if viewed say at 1600X900 in Internet Explorer the image is not stretched across the viewable area like it is in Firefox.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    if viewed say at 1600X900 in Internet Explorer the image is not stretched across the viewable area like it is in Firefox.
    Yeah, this is using CSS3, which IE 8 and under don't support. This is pointed out in the ALA article the example comes from.

  11. #11
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yeah, this is using CSS3, which IE 8 and under don't support. This is pointed out in the ALA article the example comes from.
    over than having to use flash is there any way to work around this? since most people who are casual web visitors don't even know what firefox or safari are.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You could use something like Supersized2, which employs jQuery to create the full background.

  13. #13
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could use something like Supersized2, which employs jQuery to create the full background.
    thanks! i don't know where you source all this info from, but i will def. look into this week
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    i don't know where you source all this info from...
    Same way you have... over time you stumble across things, see things mentioned, do google searches to find what you need...

  15. #15
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    There's a better solution out there (even though people seem to keep ignoring it) and we had the thread only 3 days before this one elsewhere (again):

    http://www.sitepoint.com/forums/showthread.php?t=701890

    Why on earth would you rely on JavaScript when you can do it with CSS and one IMG element on the page? Crazy idea.

  16. #16
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    There's a better solution out there (even though people seem to keep ignoring it) and we had the thread only 3 days before this one elsewhere (again):

    http://www.sitepoint.com/forums/showthread.php?t=701890

    Why on earth would you rely on JavaScript when you can do it with CSS and one IMG element on the page? Crazy idea.
    looking at both now...

    thank you.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  17. #17
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    both are cool and can be implemented in diff situations 4 diff needs, but im gonna go with the second one. awesome examples.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    There's a better solution out there (even though people seem to keep ignoring it)
    One weakness with that method, Alex, is that it will bend the image out of shape depending on the height and width of the viewport. Both the CSS3 and jQuery methods account for this—a deal breaker for me. (Not that I like full-size backgrounds, mind you, but I have been asked to do them...)

  19. #19
    SitePoint Evangelist
    Join Date
    Oct 2007
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Making a background image that large is a bad idea. It will certainly gobble up your loading time. Also keep in mind that this one is supposed to be just for backgrounds, so you need not to have too many details on it.


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
  •