# CSS: “background-size”: X is not a “background-size” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-background-size-x-is-not-a-background-size-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `background-size` property only accepts `auto`, `cover`, `contain`, or one or two lengths or percentages, so the validator reports any other value, such as `default`, `none` or `fill`.

`default` is a value of `cursor`, not of `background-size`. The default here is `auto`, which draws the image at its natural size. `cover` scales the image until it fills the whole element, cropping whatever overflows, and `contain` scales it until it fits entirely inside. Two values set the width and the height separately, for example `100% auto`. The CSS-wide keywords `initial`, `inherit`, `unset` and `revert` are also accepted.

Browsers ignore the invalid declaration, so the image keeps the size an earlier rule gave it, or `auto` if no rule did. If you wrote `default` to undo a `cover` set elsewhere, the image stays scaled to cover the element until you change the value to `auto`.

With several background layers, the property takes a comma-separated list such as `cover, auto`, one size per layer. A bad keyword anywhere in the list, or in either half of a two-value pair, is enough to trigger the error, and the browser then drops the whole declaration. In the `background` shorthand, where the size goes after the position and a slash, the same mistake produces a different message: `“background”: “default” is not a “background” value.`

## Invalid example

```css
.hero {
  background-image: url("hero.jpg");
  background-size: cover;
}

.hero.compact {
  background-size: default;
}
```

## Valid example

```css
.hero {
  background-image: url("hero.jpg");
  background-size: cover;
}

.hero.compact {
  background-size: auto;
}
```