Making a wide-screen background'ed website

June 20, 2012 8:33 AM

Webdesign: How to make a wide-screen centralized background in HTML? Any tips?

I know mostly what the deal is, but are there any specific guides that you can help me polish myself up in making a website that has a centralized, massive splash background image?
What size should I make the total background image?
How will the size affect different browsers?
Is there anything clever you can do with elasticity?
Are there any design templates you know of?
Any tips?

Thanks all!

posted by Cogentesque to Computers & Internet (9 answers total)

Best answer: You can do the background with a single line of css.

body { background:url(address.com/of/your/image) no-repeat center 0; }

If the image is wider than, say, 1000-1200 pixels you'll have to be comfortable with the fact that some people's monitors won't fit the whole image.
posted by cirrostratus at 8:43 AM on June 20, 2012 [2 favorites]

If I were doing this I would probably pick three images and use on as a header and two for each side of your content area. I'm more of a fan of fixed width layouts these days.

Using three images will give you the illusion of a big background image without being a huge background image.
posted by cjorgensen at 9:00 AM on June 20, 2012

Best answer: Here is a decent tutorial: http://webdesignerwall.com/tutorials/how-to-css-large-background
posted by zoetrope at 9:34 AM on June 20, 2012

Best answer: You can use Vegas for jQuery so that your photo adapts to different browser sizes. Vegas uses texture overlays to minimize image degradation from stretching the image, so you can use smaller images (their demo uses 720 x 480 photos).

You should optimize your background image so it weights a bit less. Don't make your visitors download a 1MB image (even 500kb is too heavy, in my opinion). Use ImageOptim for OS X, or Smushit. The correct format is also important: use jpg for photos, png for illustrations with flat colors.
posted by clearlydemon at 10:16 AM on June 20, 2012 [1 favorite]

You need javascript for the image to be resizable with the browser (rather than a central x-dimensions window into a very-large background image). There are many jQuery plugins for this.
posted by rhizome at 11:10 AM on June 20, 2012

Best answer: I've used Supersized in the past.

Also a technique on CSS Tricks - Perfect Full Page Background Image

These will resize to the browser width. The Retina MacBook Pros are 2880x1800, which is huge. You might want to use some javascript to load a low res background image, and then add in the full size image.
posted by backwards guitar at 12:20 PM on June 20, 2012 [1 favorite]

A lot of good suggestions already.

Do you want to have a perfectly resizable image, or do you simply want an image that's centered? In terms of sizes you want to support, do you have metrics on your visitors to account for specific sizes?

It sounds like a set of a few different backgrounds, in conjunction with some CSS media queries for the set of a few basic sizes may solve your issue.
posted by artlung at 12:55 PM on June 20, 2012

Response by poster: Fantastic suggestions all, artlung: CSS media queries eh? They sound mighty interestin'. Do you have any information on where I might find some more about that?

As far as metrics goes, it will be (essentially) a new site and as such my metrics will, I assume, be entirely standard.
posted by Cogentesque at 1:53 PM on June 22, 2012

So, have a look at this: http://www.thismanslife.co.uk/projects/lab/responsiveillustration/. So here's the spine of what makes this work, and how it could work for you.

/**
 * Responsive media queries criteria from:
 * http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
 */
body {

}

/* iMac (everybody gets this... unless ----------------------- */
body {
    background-image: url(/whatever-laptop.png);
}

/* MacBook --------------------------------------------------- */
@media screen and (max-width: 1280px) {
    body {
        background-image: url(/whatever-laptop.png);
    }
}

/* iPad ------------------------------------------------------ */
@media screen and (max-width: 1024px) {
    body {
        background-image: url(/whatever-ipad.png);
    }
}

/* iPad (portrait) ------------------------------------------- */
@media screen and (max-width: 768px) {
    body {
        background-image: url(/whatever-ipad-portrait.png);
    }
}

/* iPhone ---------------------------------------------------- */
@media screen and (max-width: 480px) {
    body {
        background-image: url(/whatever-iphone.png);
    }

}

/* iPhone (portrait) ----------------------------------------- */
@media screen and (max-width: 320px) {
    body {
        background-image: url(/whatever-iphone.png);
    }
}

I use the default responsive styles from Twitter Bootstrap on joecrawford.com and it works well - it resizes for whatever modern browsers come my way.

Many other good approaches, but you should be aware of this option. Theoretically you could do any number of @media queries to get a pleasing effect.
posted by artlung at 3:36 PM on June 22, 2012 [1 favorite]