CSS Full Screen Background

by: John Surdakowski03/30/2013

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)

Let's discuss your ecommerce goals

Schedule a consultation call with one of our experts.

CONTACT US
Let's discuss your ecommerce goals