It's so simple! Using CSS to control background image scaling...

Submitted by ebrouwer on Mon, 07/12/2010 - 09:19

Wow. I just read a fantastic, simple article on A List Apart outlining how to create full browser background images. With some very simple CSS, you can scale your background image, up or down, to fit each visitor's browser window.


body {
  background: #000 url(myBackground_1280x960.jpg) »
center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

If you want to hold onto a little more creative control, you can specify a minimum size for the background image with a media call. I'm not exactly sure what media calls are, or how to best use them, but this is good to know. More research!


@media only all and (max-width: 1024px) and (max-height: 768px) {
  body {
    -moz-background-size: 1024px 768px;
    background-size: 1024px 768px;
  }

I will certainly start adding this code to just about everything I develop!

If you liked this post, buy me a cup of coffee.
»