CSS Full Screen Background
Quick Summary I was working on a project recently that needed a CSS full screen background. The image needed to resize according to the users browser width. We also wanted this to be proportionate, so that the image didnt look all stretched. After a few searches on Google, I came across this quick tip from CSS-Tricks. I […]
I was working on a project recently that needed a CSS full screen background. The image needed to resize according to the users browser width. We also wanted this to be proportionate, so that the image didnt look all stretched.
After a few searches on Google, I came across this quick tip from CSS-Tricks. I just wanted to share, since a lot of people come across this issue. Thanks Chris!
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; }
Works on:
- 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)
