HTML - Arrière-plans

Types d'arrière-plans

En matière de design web, il existe plusieurs types d'arrière-plans à choisir. Chaque type offre différentes possibilités visuelles et peut être utilisé pour créer des designs attrayants. Voici les trois principaux types d'arrière-plans : les arrière-plans de couleur, les arrière-plans d'image et les arrière-plans dégradés.

background-image: url('path/to/image.jpg');

Propriétés de fond

CSS offre des propriétés pour contrôler l'apparence et le comportement des arrière-plans. Ces propriétés vous permettent de définir la couleur de fond, l'image, la répétition, la position, l'attachement et la taille. Examinons de plus près chacune de ces propriétés de fond.

.element {
  background-color: #ff0000; /* Rouge */
}

.element {
  background-image: url('chemin/vers/image.jpg');
}

.element {
  background-image: url('chemin/vers/image.jpg');
  background-repeat: no-repeat;
}

.element {
  background-image: url('chemin/vers/image.jpg');
  background-position: center center;
}

.element { 
  background-image: url('chemin/vers/image.jpg'); 
  background-attachment: fixed; 
}

Propriété abrégée de l'arrière-plan

Le CSS offre un moyen de définir plusieurs propriétés d'arrière-plan en une seule déclaration en utilisant la propriété abrégée background. Cette propriété vous permet de combiner plusieurs propriétés liées à l'arrière-plan en une seule instruction, rendant votre code plus lisible.

Pour utiliser la propriété abrégée background, vous spécifiez les valeurs des propriétés individuelles d'arrière-plan dans un ordre spécifique. La syntaxe de la propriété abrégée background est la suivante :

background: [background-color] [background-image] [background-position] [background-repeat] [background-attachment] [background-size];

body { 
    ...
}

Voici ce que représente chaque valeur :

• background-color : La couleur de l'arrière-plan de l'élément.
• background-image : L'URL de l'image.
• background-position : La position de l'image.
• background-repeat : Comment l'image se répète.
• background-attachment : Comment l'image défile avec le contenu.
• background-size : La taille de l'image.

Lorsque vous utilisez cette propriété abrégée, vous pouvez omettre certaines valeurs si vous ne souhaitez pas les définir. Cependant, gardez leur ordre cohérent.

.element {
  background: #f2f2f2 url('path/to/image.jpg') center no-repeat fixed;
}

body { 
    ...
}

Dans cet exemple :

• #f2f2f2 définit une couleur gris clair pour l'arrière-plan.
• 'path/to/image.jpg' définit une URL d'image pour l'arrière-plan.
• center la positionne au centre de son élément.
• no-repeat signifie qu'elle ne se répète pas.
• fixed signifie qu'elle reste fixe pendant le défilement du contenu.

L'utilisation de cette propriété abrégée peut vous aider à écrire un code CSS plus concis. C'est utile lorsque vous définissez plusieurs arrière-plans pour un élément en une seule ligne.

Si vous souhaitez plus tard modifier une seule propriété individuelle après avoir utilisé cette propriété abrégée, vous devrez respécifier toutes les autres valeurs aussi. Sinon, utilisez des propriétés individuelles pour cibler des aspects spécifiques sans affecter les autres.

Arrière-plans multiples

Le CSS vous permet de superposer plusieurs arrière-plans sur un seul élément. En spécifiant plusieurs images d'arrière-plan et couleurs, vous pouvez obtenir des effets visuels sans avoir besoin d'éléments HTML supplémentaires.

Pour appliquer plusieurs arrière-plans à un élément, utilisez la propriété background ou les propriétés d'arrière-plan individuelles, en séparant chaque arrière-plan par une virgule.

.element {
  background: url('image1.jpg') center no-repeat,
              url('image2.jpg') top left repeat,
              linear-gradient(to bottom, #fff, #000);
}

1. image1.jpg est positionnée au centre et ne se répète pas.
2. image2.jpg est positionnée en haut à gauche et se répète.
3. Un dégradé linéaire du blanc au noir est appliqué comme troisième arrière-plan.

Les arrière-plans sont superposés les uns sur les autres, le premier arrière-plan spécifié étant la couche supérieure et le dernier arrière-plan spécifié étant la couche inférieure.

Vous pouvez également combiner des couleurs d'arrière-plan avec des images :

.element {
  background: url('image.jpg') center no-repeat,
              #ff0000;
}

Dans ce cas, la couleur rouge (#ff0000) sera visible dans les zones où l'image est transparente ou ne couvre pas tout l'élément.

Lors de l'utilisation de plusieurs arrière-plans, vous pouvez contrôler le positionnement, la répétition et la taille de chacun séparément :

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: center, top right;
  background-repeat: no-repeat, repeat-x;
  background-size: cover, contain;
}

• image1.jpg est centrée, ne se répète pas et couvre tout l'élément.
• image2.jpg est positionnée en haut à droite ; se répète horizontalement ; s'adapte à l'intérieur tout en maintenant son ratio d'aspect.

En superposant plusieurs arrière-plans comme le montrent ces exemples ci-dessus, vous pouvez créer des designs attrayants qui combinent images, couleurs et dégradés. Expérimentez avec différentes combinaisons et propriétés pour obtenir l'effet souhaité pour votre page web.

Transparence de l'arrière-plan

Le CSS offre des moyens de créer des arrière-plans transparents en utilisant des valeurs de couleur RGBA ou HSLA. Cela vous permet de contrôler l'opacité de l'arrière-plan, le rendant partiellement ou totalement transparent.

Pour créer un arrière-plan transparent en utilisant RGBA :

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

De même, vous pouvez utiliser HSLA pour créer des arrière-plans transparents :

.element {
  background-color: hsla(0, 100%, 50%, 0.5);
}

En ajustant la valeur alpha, vous pouvez contrôler le niveau de transparence de votre couleur d'arrière-plan. Cela est utile lorsque vous souhaitez créer des superpositions ou montrer du contenu sous un élément.

<div class="overlay">
  <h1>Bienvenue</h1>
  <p>Ceci est du texte sur un arrière-plan transparent.</p>
</div>

<style>
.overlay {
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 20px;
}
</style>

Lorsque vous utilisez des arrière-plans transparents, réfléchissez à la facilité de lecture de votre texte. Choisissez de bonnes couleurs et tailles de police pour assurer un contraste suffisant avec votre arrière-plan. Les arrière-plans transparents sont utiles pour créer de beaux designs et superpositions tout en montrant le contenu sous-jacent. En contrôlant la transparence avec des valeurs RGBA ou HSLA, vous obtenez juste le bon niveau d'effet transparent dans vos designs.

Exemples et Démonstrations

Voici quelques exemples pratiques d'utilisation des arrière-plans dans la conception web. Ces extraits de code et démonstrations en direct montrent comment vous pouvez utiliser différents types d'arrière-plans et de propriétés pour créer des designs attrayants.

<section class="section-1">
  <h2>Section 1</h2>
  <p>Cette section a un arrière-plan bleu.</p>
</section>

<section class="section-2">
  <h2>Section 2</h2>
  <p>Cette section a un arrière-plan vert.</p>
</section>

<style>
.section-1 {
  background-color: #2196F3;
  color: #fff;
  padding: 20px;
}

.section-2 {
  background-color: #4CAF50;
  color: #fff;
  padding: 20px;
}
</style>

<section class="hero">
   <h1>Bienvenue sur Mon Site Web</h1>
   <p>Ceci est une section héroïque avec une image d'arrière-plan.</p>
</section>

<style>
.hero {
   background-image: url('chemin/vers/image-hero.jpg');
   background-size: cover;
   background-position: center;
   height: 400px; 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   color: #fff; 
   text-align: center;
}
</style>  

<section class="gradient-section">
  <div class="overlay">
    <h2>Section en Dégradé</h2>
    <p>Cette section a des arrière-plans en dégradé avec des superpositions transparentes.</p>
  </div>
</section>

<style>
.gradient-section {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  padding: 50px;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  color: #fff;
  text-align: center;
}
</style>