CSS background-size

Defines the size of one or more background images.

Syntax

background-size: <value>;

Copy to clipboard
Copy to clipboard

where <value> can be one of the following:

• contain: scales the image as much as possible while keeping the aspect ratio and avoids clipping the image.
• cover: scales the image and maintains its aspect ratio, but this time the image will fill the whole area of the element and some clipping may occur.
• auto: tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.
• Length value: 50%, 100px 50px

Note: If one length value is provided that will be applied to the width. If two length values are provided, the second value will be applied to the height.

Example 1

Set background horizontal size to 500px:

.hero {
  background-image: url('fish.png');
  background-repeat: no-repeat;
  height: 1000px;
  background-size: 500px;
}

Copy to clipboard
Copy to clipboard

The CSS code above will produce the following result:

Example 2

Set background horizontal size and vertical size with a % value:

.hero {
  background-image: url('fish.png');
  background-repeat: no-repeat;
  height: 1000px;
  background-size: 50% 25%;
}

Copy to clipboard
Copy to clipboard

The CSS code above will produce the following result:

Example 3

Set the background size to fill the whole element while maintaining the aspect ratio:

.hero {
  background-image: url('fish.png');
  background-repeat: no-repeat;
  height: 1000px;
  background-size: cover;
}

Copy to clipboard
Copy to clipboard

The CSS code above will produce the following result:

Example 4

Set the background size to maintain the aspect ratio and avoid any clipping:

.hero {
  background-image: url('fish.png');
  background-repeat: no-repeat;
  height: 1000px;
  background-size: contain;
}

Copy to clipboard
Copy to clipboard

The CSS code above will produce the following result: