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:
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.
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:
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.
p {
background-image: url(image.png);
background-repeat: no-repeat round;
background-size: 20% 30%
}