Full Page Background Image Through CSS3 is a thing I have been acquired a lot of times for. People want to put some image in the background of their sites, and want it to become perfectly fit at the back of everything. The easiest method to do it is one below.

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; }

Here the red part is the path to background image. You have to add above lines at the end of you css file. (In case of WordPress Goto Appearance>> Edit>> Stylesheet.css and put at the end of it the above code)


Works great in:

  • Chrome 9+
  • IE 9+
  • Safari 3+
  • Opera 10+ (Didn’t checked below that)
  • Firefox Mozilla 3.6+ (May also work in all above versions)

Any questions?

  • You are welcomed to ask any questions in relation to this snippet.
  • There is Js, Jquery method too. But if this is helpful why go for extra stuff.