# Backgrounds HTML : comment personnaliser l’arrière-plan de son site Web ? Les arrière-plans (*backgrounds*) HTML peuvent être définis par des valeurs de couleur ou conçus avec un fichier image. En choisissant le bon arrière-plan, vous améliorez non seulement le design de votre site Web, mais vous garantissez aussi la lisibilité de son contenu. ## Backgrounds HTML : de quoi s’agit-il exactement ? La **surface derrière le contenu** d’un site Web constitue le background HTML, c’est-à-dire l’arrière-plan. Ces arrière-plans peuvent être choisis par l’utilisateur lors de la création de la page en HTML et être modifiés ultérieurement. Par défaut, les arrière-plans HTML sont entièrement blancs. Il est toutefois recommandé de les modifier, non seulement pour améliorer le design du site Web, mais aussi pour assurer une meilleure visibilité du contenu. ## Que peut-on utiliser comme background HTML ? Il existe deux méthodes différentes pour créer des arrière-plans HTML : - **via une valeur de couleur** - **à partir d’une image ou d’un dégradé de couleurs** Les valeurs sont définies via l’attribut HTML `style`. Vous découvrirez dans les paragraphes suivants la marche à suivre pour ces deux possibilités. Conseil Dans notre article séparé, vous en apprendrez plus sur les possibilités offertes par HTML style. ### Définir une couleur pour les arrière-plans HTML Pour modifier la couleur des arrière-plans HTML, utilisez l’attribut `style` et la propriété HTML `background-color` ou `bgcolor`. Pour indiquer la **valeur de la couleur**, vous avez trois options différentes : - **Nom de la couleur** : vous avez la possibilité d’appeler la couleur souhaitée par son nom en anglais. Outre les valeurs standard comme `red`, `yellow` ou `green`, des couleurs spéciales comme `lightblue` ou `deepskyblue` sont également possibles. Les majuscules et les minuscules n’ont pas d’importance. - **Code couleur hexadécimal** : vous pouvez définir les couleurs à l’aide de leur code hexadécimal à six chiffres. Celui-ci se compose de trois paires de chiffres de `0` à `9` et de lettres `a` à `f`. Les deux premiers caractères représentent la valeur du rouge, les deux suivants celle du vert, et les deux derniers celle du bleu ; la combinaison `00` étant la valeur la plus basse et `ff` la plus élevée. Le bleu serait par conséquent `0000ff`. - **Valeur RGB** : enfin, vous pouvez utiliser la valeur RGB, qui est aussi la base du code couleur hexadécimal. Les valeurs se situent dans le spectre `0` à `255` et se réfèrent à nouveau aux couleurs rouge, vert et bleu. La valeur du bleu serait donc RGB (0, 0, 255). La syntaxe permettant de choisir la couleur de vos arrière-plans HTML se présente comme suit : ```html ``` Dans l’exemple suivant, nous utilisons un code couleur hexadécimal pour définir un bleu clair comme couleur d’arrière-plan : ```html Exemple d’arrière-plan

Voici votre ligne de titre

Voici le contenu de votre site Web.

``` Le résultat ressemble à ceci : [![Image: Arrière-plan HTML : exemple de couleur](https://www.ionos.com/fr-ch/digitalguide/fileadmin/_processed_/6/5/csm_html-exemple-couleur-arriere-plan_ef6cef1282.webp "Arrière-plan HTML : exemple de couleur")](https://www.ionos.com/fr-ch/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-exemple-couleur-arriere-plan.png) Exemple d’arrière-plan HTML en couleur basé sur le code hexadécimal #BFEFFF Si nécessaire, vous pouvez de plus définir les couleurs pour les arrière-plans HTML séparément pour les différentes zones de vos sites Web. Pour cela, on utilise également l’attribut `style` et la propriété HTML `background-color`. Vous pouvez voir le fonctionnement dans l’exemple suivant, dans lequel différentes couleurs ont été choisies pour l’arrière-plan général ainsi que pour les arrière-plans des titres `

` et des passages de texte `

` : ```html Exemple d’arrière-plan

L’arrière-plan de ce titre a la valeur de couleur DodgerBlue.

Cet arrière-plan a la valeur de couleur DarkTurquoise.

``` [![Image: Exemple : trois arrière-plans HTML de couleurs différentes](https://www.ionos.com/fr-ch/digitalguide/fileadmin/_processed_/1/0/csm_html-exemple-couleur-arriere-plan-2_6f62bb9393.webp "Exemple : trois arrière-plans HTML de couleurs différentes")](https://www.ionos.com/fr-ch/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-exemple-couleur-arriere-plan-2.png) Exemple d’arrière-plan HTML avec trois couleurs différentes ### Définir des images comme backgrounds HTML Pour pouvoir utiliser des graphiques ou des images en backgrounds HTML, il faut qu’ils soient aux formats d’image *JPG*, *PNG*, *SVG*, *WebP* ou *GIF*. Dans l’exemple suivant, voici le code nécessaire pour l’intégration d’une image en arrière-plan. Bien évidemment, le chemin vers l’image doit être adapté individuellement. ```html Exemple d’arrière-plan

Voici votre titre

Voici le contenu de votre site Web.

``` Lors de l’utilisation d’une image, il est important de garder à l’esprit la lisibilité du contenu. En indiquant d’autres paramètres, vous pouvez à tout moment adapter le **positionnement** de l’image ou du graphique à cet effet. This is a markdown version of: [https://www.ionos.com/fr-ch/digitalguide/sites-internet/developpement-web/backgrounds-html/](https://www.ionos.com/fr-ch/digitalguide/sites-internet/developpement-web/backgrounds-html/) for AI/LLM consumption.