:::: MENU ::::

Picture Perfect

0 Flares Twitter 0 Facebook 0 Google+ 0 Reddit 0 StumbleUpon 0 LinkedIn 0 Filament.io 0 Flares ×

my borderAlways one for finding how to do this, and then forgetting where I found and it and which sites I applied it to, I decided to update and post it for my own sanity.

The goal is to use a background image on a website, that will automatically adjust to cover the entire browser window at all times.

It has to;

  • Fill the entire page with image, no white space
  • Scales the image automatically
  • Retains aspect ratio
  • Centres image on the page
  • Doesn’t cause scrollbars
  • As cross-browser compatible as possible

I’ve done this through CSS thanks to the background-size property using the following code;
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

No more spending hours searching :D

0 Flares Twitter 0 Facebook 0 Google+ 0 Reddit 0 StumbleUpon 0 LinkedIn 0 Filament.io 0 Flares ×

One Comment

  • Richard |

    I’ve got several bookmarks (somewhere) on how to make a beautiful full screen background, occasionally I’ll see a site that has a full screen background, admire it’s beauty and simplicity and want to make my next project use one, only to later discover that lots of words don’t actually look good over a big background image!

So, what do you think ?