New! My 44-page ebook "CSS in 44 minutes" is out! 😃
Defines the size of the background image.
background-size: auto auto;
The background image will retain its original size.
For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.
background-size: 120px 80px;
You can specify a size in pixels:
- the first value is the horizontal size
- the second is the vertical size
background-size: 100% 50%;
You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.
contain will resize the background image to make sure it remains fully visible.
cover will resize the background image to make sure the element is fully covered.