Search code examples
cssbackgroundfixed

How to fix the background image so that it does not reduce on zooming out?

I want a fixed background image like this.

Can this be made with only css without using any jQuery Plugin?

Solution

  • CSS3 way: (ie9+ etc)

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

    jQuery plugin cross-browser way: http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/