Background Size, Step 1

By default, the browser does not resize the background image. However, what if you need to set the background to a different width and height or bind its dimensions to the dimensions of the parent block?

You can do this using the background-size property. It takes two arguments as a value: the first is the width of the background image, and the second is its height. The second argument is optional. If the height is not specified, then it is determined automatically depending on the width and original proportions. By default, both arguments are auto.

Example:

background-size: auto auto; /* Original image width and height */
background-size: 100px; /* Width of 100px, proportional height */
background-size: 100px 200px; /* Width of 100px, height of 200px */

Let’s see how this property works in practice.