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.
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…)
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.
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.
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.
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.
