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

Go Back