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.

Hébergement Web
Hébergement Web flexible, performant et sûr
  • Certificat SSL et protection DDoS
  • Sauvegarde et restauration des données
  • Assistance 24/7 et conseiller personnel

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 :

<body style="background-color: valeur;">
html

Dans l’exemple suivant, nous utilisons un code couleur hexadécimal pour définir un bleu clair comme couleur d’arrière-plan :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple d’arrière-plan</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Voici votre ligne de titre</h1>
<p>
Voici le contenu de votre site Web.
</p>
</div>
</body>
</html>
html

Le résultat ressemble à ceci :

Image: Arrière-plan HTML : exemple de couleur
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 <h2> et des passages de texte <p> :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple d’arrière-plan</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>L’arrière-plan de ce titre a la valeur de couleur DodgerBlue.</h2>
<p>Cet arrière-plan a la valeur de couleur DarkTurquoise.</p>
</body>
</html>
html
Image: Exemple : trois arrière-plans HTML de couleurs différentes
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.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple d’arrière-plan</title>
<style>
body { background-image: url('/utilisateur/dossier/assets/arrière-plan/img/image.svg');background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Voici votre titre</h1>
<p>
Voici le contenu de votre site Web.
</p>
</div>
</body>
</html>
html

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.

Nom de domaine
Votre domaine en un clic
  • Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
  • 1 certificat SSL Wildcard par contrat
  • Boîte email de 2 Go
Cet article vous a-t-il été utile ?
Aller au menu principal