CSS3 Only Full Size Background Images

CSS3 Only Full Size Background Images

Whilst browsing the Internet today I found a great css only technique to make full page background images. It something I had difficulty with before so I thought I would share with you.

The goal is to have a background image on a website that covers the entire browser window at all times.

Here is the code you would use

These techniques should work in

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Click here for a CSS Only Full Size Background Images demo

Click here to view the original article

comments powered by Disqus