STARIKOVS

There’re some jQuery plugins that help to stretch background image on the body or other HTML elements. It’s not a hard task to make background image covering HTML element with help of JavaScript by adding a resizable img tag. But what about CSS? Is it possible to make that stretching using just CSS? Fortunately, it’s possible!

To stretch background image on the HTML element you should use background-size CSS property with cover value.

1
2
3
4
5
6
7

  body {
    background: url(image.jpg) fixed no-repeat;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }

Here’s the example:

Check out this Pen!

Try it here http://codepen.io/starikovs/pen/aDyGI.