# background-size

## Introduction

The `background-size` attribute sets the size of the background image. Multiple background images can be described with a comma separated list of sizes.

## Syntax

```css
background-size: 50%;
background-size: 40px, 30px;
background-size: cover;
background-size: 50% 50%, contain;
```

### Take values

- `auto`

**Default value.** The background image retains its original size.

- `<length>`

Sets the width and height of the background image, if only one value is given then the other value is automatically set to `auto`.

- `<percentage>`

Sets the width and height of the background image as a percentage of the drawing range. Similarly, if only one value is given, the other is set to `auto`.

- `cover`

Resets the image size to ensure that the image will completely cover the entire border, any excess will be cropped out.

- `contain`

Resets the size of the background image and ensures that the image is fully visible (one side fits perfectly).

### Standardised syntax

```css
background-size: [<length> | <percentage> | auto ]{1,2} | cover | contain
```