Redimensionner les images d'arrière-plan avec background-size
=============================================================

La propriété CSS `background-size` permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer une mosaïque répétant l'image à sa taille normale en indiquant une hauteur et/ou une largeur pour l'image. Il est ainsi possible d'agrandir ou de rapetisser l'image.

Répéter une grande image
------------------------

Prenons une grande image, ici le logo de Firefox aux dimensions 2982x2808 pixels. Imaginons qu'on veuille (pour de mauvaises raisons), obtenir une mosaïque avec quatre exemplaires de cette image dans un élément de 300x300 pixels. Pour cela, on pourra fixer la propriété `background-size` à 150 pixels.

### HTML


```html
<div class="tiledBackground"></div>
```

### CSS


```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

### Résultat

Étirer une image
----------------

On peut aussi indiquer les dimensions horizontale et verticale de l'image, comme ceci :

### CSS


```css
background-size: 300px 150px;
```

### Résultat

![Le logo étiré](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/stretched_firefox_logo.png)

Agrandir une image
------------------

À l'inverse, on peut vouloir agrandir une image en arrière-plan. Ici, on passe d'une icône de 32x32 pixels à 300x300 pixels :

### CSS


```css
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
```

### Résultat

![Logo de MDN agrandi](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/scaled_mdn_logo.png)

Comme vous pouvez le voir, le CSS est quasi-identique, seul le nom du fichier a été modifié.

Les valeurs spéciales `contain` et `cover`
------------------------------------------

En plus des valeurs de longueur (type `<length>`), la propriété `background-size` permet d'utiliser valeurs spéciales `contain` et `cover`. Voyons ce qu'ils offrent.

### `contain`

La valeur `contain` indique que, quelle que soit la taille de la boîte englobante, l'image d'arrière-plan devrait être redimensionnée afin que chaque côté soit aussi grand que possible, sans dépasser la taille du conteneur. Redimensionnez l'exemple qui suit pour observer l'effet obtenu.

#### HTML


```html
<div class="bgSizeContain">
  <p>Essayez de redimensionner cet élément !</p>
</div>
```


#### CSS


```css
.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  resize: both;
  overflow: scroll;
}
```


#### Résultat

### `cover`

La valeur `cover` indique que l'image d'arrière-plan devrait être aussi petite que possible tout en ayant ses deux dimensions supérieures ou égales à celles du conteneur. Vous pouvez redimensionner l'exemple qui suit pour observer l'effet obtenu.

#### HTML


```html
<div class="bgSizeCover">
  <p>Essayez de redimensionner cet élément !</p>
</div>
```


#### CSS


```css
.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  resize: both;
  overflow: scroll;
}
```


#### Résultat

Voir aussi
----------

* `background-size`
* `background`
* Redimensionnement des arrières-plans SVG