Search code examples
cssimagebackgroundscalingaspect-ratio

Scaling background images to fill browser window with centering and aspect ratio

I know there is a lot of information out there on this but I've searched and searched and still have not found the help that I need.

Essentially I'm trying to fill the entire browser window with a background image that scales itself and retains it's aspect ratio automatically at any size so that it can be viewed on any device.

Here is an excellent example of what I am trying to achieve:

http://www.comme-des-garcons.com/rawvision.html

The background image, when sized to 320x480 then stretched from 480 to 640 expands itself to the right!

If anyone out there can shed some light on how this is achieved via css I would greatly appreciate it!

Solution

  • You can achieve this with the new CSS3 property background-size: cover

    You can see it with this fiddle I created http://fiddle.jshell.net/rxMbe/

    Example:

    body{
  background-image: url(splash.jpg);
  background-size: cover;
}

    It is widely supported by all major browsers, it's safe to use: http://caniuse.com/background-img-opts