PDA

View Full Version : How to make a background image stretch and center?


iamlowlikeyou
02-08-2010, 03:19 PM
I want to make a background image, that fits the screen, no matter how large the browser window is cropped and no matter what the current resolution is set to.
I made a background image that fittet on my own computer, but when I load the site from a computer with higher resolution, the background image is side-by-side.
Is there any way to make a background image automatically stretch and center or something like that, so it always fits the website - and is static, that means no scrolling in the image...
Thanks!

gentleone
02-08-2010, 04:41 PM
With just plain CSS you can use Stu Nicholl's method, but this will stretch the image (your nice photo) which looks horrible on wide screen monitors.
http://www.cssplay.co.uk/layouts/background.html

This one is a jQuery method, but keeps the 3:4 ratio and will crop the overflow through hidden, thus your photo will stay nice on wide screens as well.
http://css-tricks.com/how-to-resizeable-background-image/

gentleone
02-08-2010, 04:55 PM
In the CSS Tricks article I see at the 3rd example that they used Stu Nicholl's method and adjust it a bit so that the image will also keep the 3:4 ratio. So this one is actually the best option, because you don't need JavaScript at all.