# Background image dans theme.json : habiller un bloc Groupe

> Préparer son theme.json pour la version 6.5 passe par le support settings.background et son rendu dans l'inspecteur du bloc Groupe. Ce que ce réglage change concrètement.

- Auteur : Clément Hadrot
- Publié le : 2023-05-15
- Mis à jour le : 2023-05-15
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/background-image-theme-json-bloc-groupe/

## L’essentiel

- settings.background active un contrôle d'image de fond sur le bloc Groupe
- backgroundSize gère l'ajustement, pas seulement backgroundImage
- Le bloc Cover reste un mécanisme distinct, non concerné par ce support

Un client viticole voulait des sections d'histoire du domaine avec une texture de fond subtile (une photo de vigne légèrement assombrie) derrière un bloc Groupe contenant du texte, sans passer systématiquement par le bloc Cover, jugé trop contraignant pour l'usage éditorial souhaité par l'équipe marketing du domaine. La version 6.5 de WordPress a justement introduit un support d'image de fond directement exploitable sur le bloc Groupe via `theme.json`, une option qui correspondait exactement au besoin.

Ce tutoriel couvre l'activation et l'usage de `settings.background` pour le bloc Groupe. Le mécanisme du bloc Cover, plus ancien et fonctionnant différemment avec sa propre gestion d'overlay, n'est pas traité ici.

## Activer le support dans settings.background

La clé `settings.background` de `theme.json` active, pour les blocs compatibles, un contrôle d'image de fond directement dans l'inspecteur, avec gestion de la taille d'ajustement et de la position. Deux sous-réglages principaux la composent : `backgroundImage` et `backgroundSize`.

```
{
  "version": 2,
  "settings": {
    "background": {
      "backgroundImage": true,
      "backgroundSize": true
    }
  }
}
```

Une fois ce réglage actif, le bloc Groupe affiche une nouvelle section « Image d'arrière-plan » dans l'onglet Styles de l'inspecteur, avec un sélecteur qui ouvre directement la médiathèque, exactement comme pour n'importe quelle autre image du site.

> L'essentiel à retenir : settings.background active un contrôle d'image de fond sur le bloc Groupe ; backgroundSize gère l'ajustement, pas seulement backgroundImage ; Le bloc Cover reste un mécanisme distinct, non concerné par ce support

## Ce que gère backgroundSize au-delà de l'image elle-même

Le sous-réglage `backgroundSize` ne se contente pas d'afficher l'image : il expose des contrôles pour le mode d'ajustement, équivalents aux valeurs CSS `cover`, `contain` et une taille fixe personnalisée, ainsi qu'un réglage de position (haut, centre, bas et équivalents horizontaux). Sur le projet viticole, le mode `cover` a été retenu par défaut pour que la photo de vigne remplisse toujours entièrement la section quelle que soit la quantité de texte affichée par-dessus, sans jamais laisser apparaître de bande vide sur les côtés.

```
<!-- wp:group {
  "style": {
    "background": {
      "backgroundImage": {
        "url": "https://example.com/wp-content/uploads/2024/vigne-automne.jpg"
      },
      "backgroundSize": "cover"
    }
  }
} -->
<div class="wp-block-group has-background">
    <p>Depuis quatre générations, le domaine cultive ces coteaux exposés plein sud.</p>
</div>
<!-- /wp:group -->
```

## Définir une image de fond par défaut au niveau global

Au-delà de l'activation du contrôle, il est possible de fixer une image de fond par défaut appliquée globalement via `styles.background`, reprise ensuite par tout bloc Groupe qui n'a pas reçu de réglage local. Cette approche a été écartée pour le domaine viticole, chaque section d'histoire nécessitant une photo différente, mais elle reste pertinente pour un site où une texture de fond doit rester identique partout, par exemple un léger grain de papier sur l'ensemble des sections.

## Interaction avec le texte : penser au contraste

Un piège rencontré sur ce projet : l'image de fond activée sur le bloc Groupe ne gère aucun assombrissement automatique du texte par-dessus, contrairement au bloc Cover qui propose nativement un réglage d'opacité de superposition. Il a donc fallu ajouter manuellement une superposition semi-transparente via un pseudo-élément CSS ciblant la classe générée, pour garantir la lisibilité du texte blanc par-dessus la photographie, quelle que soit sa luminosité d'origine.

```
.wp-block-group.has-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 0;
}
```

Ce complément CSS reste indispensable dès que le texte affiché par-dessus l'image doit rester lisible sur une variété de photographies fournies par le client au fil du temps, sans qu'un contrôle assombrissement natif n'existe pour ce bloc précis.

## Ce que ce support ne remplace pas : le bloc Cover

Le bloc Cover conserve des avantages propres que `settings.background` appliqué au Groupe ne reproduit pas nativement : gestion de superposition avec opacité réglable directement dans l'inspecteur, effet de parallaxe à taille fixe, et prise en charge native d'une vidéo de fond en plus d'une image. Pour un besoin purement éditorial de texture de fond derrière du texte, sans ces fonctionnalités avancées, le bloc Groupe avec `settings.background` reste plus léger et plus rapide à utiliser au quotidien pour l'équipe éditoriale.

## En résumé

Le support `settings.background` introduit en version 6.5 rapproche le bloc Groupe des capacités jusque-là réservées au bloc Cover, avec un contrôle d'image de fond directement piloté depuis `theme.json` et l'inspecteur. Le compromis à connaître avant de le promettre à un client : aucune gestion native de superposition assombrissante, à ajouter manuellement en CSS si le texte affiché par-dessus doit rester lisible sur des photographies de luminosité variable.