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.
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.
Same way you have... over time you stumble across things, see things mentioned, do google searches to find what you need...
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.
now let me disappear from earth for about 4 days and get this done
both are cool and can be implemented in diff situations 4 diff needs, but im gonna go with the second one. awesome examples.
looking at both now...
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...)
if viewed say at 1600X900 in Internet Explorer the image is not stretched across the viewable area like it is in Firefox.
this example is not stretching across the width of Internet Explorer Browser
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.
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.
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.
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.
The ALA article I linked to has several nice4 examples, such as this:
all great things i will implement. however,
anyone have any nice sites that are currently doing this?
thanks! i don't know where you source all this info from, but i will def. look into this week
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):
You could use something like Supersized2, which employs jQuery to create the full background.
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.