CSS3 BACKGROUND SIZE

This property specifies the size of the background images being used.

In the following example, the property stretches the background image to cover the whole content are in both directions:

1
2
3
4
5
div {
  background-size: 100% 100%;
  background-image: url(image.png);
  background-origin: content-box
}

The following example will preserve the aspect ratio of the image, while stretching it so that only 2 copies of it fit on the x-axis.

1
2
3
4
5
p {
  background-size: 50% auto;
  background-image: url(image.png);
  background-origin: border-box
}

The next example forces the background image to fit exactly in 15px by 15px:

1
2
3
4
para {
  background-size: 15px 15px;
  background-image: url(image.png)
}

The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.

1
2
3
4
5
p {
  background-image: url(image.png);
  background-repeat: no-repeat round;
  background-size: 20% 30%
}