| Using background-size: cover You can use background-size: cover to scale the image, while preserving its intrinsic aspect ratio if any , to the smallest size such that both its width and its height can completely cover the background positioning area | Bear in mind, parts of the image may be hidden if the element has different proportions to its background image |
|---|---|
| And here is the image at it's original size: Using background-size: contain You can use background-size: contain to scale the image, while preserving its intrinsic aspect ratio if any , to the largest size such that both its width and its height can fit inside the background positioning area |
CSS3 introduced a new property — — that enables you to change the size of background images.
18| For example, you can have the background image stretch and contract to whatever size the element is that it is applied against | Using this option will ensure that none of the image is hidden as it scales up or down |
|---|---|
| And here is the image at it's original size: Using CSS Layers Although the property is the recommended way to stretch your background images, this property hasn't always been around | Before this property was invented, you needed to use a bit of trickery to acheive the "stretched background image" effect |
Using this option will ensure that the image doesn't get stretched out of proportion.
15