New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →


Defines the size of the background image.

default 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.

background-size: contain;

The keyword contain will resize the background image to make sure it remains fully visible.

background-size: cover;

The keyword cover will resize the background image to make sure the element is fully covered.