Section avec image de fond et contenu centré¶

La balise `<section>`¶

La balise

<section></section>

est utilisée pour regrouper un bloc de contenu qui représente une partie logique et autonome d'une page Web.

Une section peut contenir un titre, du texte, des boutons, des images ou tout autre contenu en lien avec le même sujet.
Une section est une balise de type block par défaut.
Elle occupe généralement toute la largeur disponible de son parent.

Pourquoi utiliser une `<div>` à l'intérieur de la section?¶

Lorsqu'une image de fond est appliquée à une section, il est souvent nécessaire d'ajouter une balise :

<div></div>

à l'intérieur de celle-ci.

Cette <div> agit comme un conteneur de contenu.

Résultat recherché

+----------------------------------+
|                                  |
|      IMAGE DE FOND               |
|                                  |
|      +------------------+        |
|      |                  |        |
|      |  CONTENU TEXTE   |        |
|      |                  |        |
|      +------------------+        |
|                                  |
+----------------------------------+

La section s'occupe de l'image de fond tandis que la <div> contrôle la largeur, l'alignement et la présentation du contenu affiché au-dessus de cette image.

Avantages¶

Limiter la largeur du texte pour améliorer la lecture.
Centrer facilement le contenu horizontalement.
Ajouter un fond semi-transparent derrière le texte au besoin.
Éviter que le texte s'étende sur toute la largeur de l'image.
Contrôler indépendamment la mise en page du contenu et de l'image de fond.

Sans cette <div>, le contenu serait directement placé dans la section et il serait plus difficile de gérer son positionnement et sa largeur.

Exemple¶

Code HTML

<section id="accueil">
    <div>
        <h2>Notre histoire</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam 
            gravida tempor finibus. Sed tempus consequat odio. Suspendisse 
            sed varius augue. Donec tristique tortor dui, et aliquam urna 
            hendrerit vel. Proin tincidunt semper mattis. In hac habitasse 
            platea dictumst. Aenean a tempus lectus. Suspendisse potenti. 
        </p>
    </div>
</section>

Code CSS

#accueil {
    background-image: url("../images/fond.jpg");
    background-size: cover;
    background-position: center;
    min-height: 75vh;
    align-content:center;
}

#accueil div {
    width: 75%;
    padding: 4rem;
    background-color: rgba(255,255,255,0.8);
    margin-left: auto;
    margin-right: auto;
}

Résultat

Explication des propriétés CSS¶

Section parent¶

background-image

Permet de définir l'image d'arrière-plan.

background-size: cover;

Ajuste automatiquement l'image pour couvrir toute la section.

background-position: center;

Centre l'image dans son conteneur.

 min-height: 75vh; /*vh=viewport height*/

Hauteur minimale du bloc section équivalent à 75% de la hauteur du navigateur.

align-content:center;

Alignement vertical des enfants d'un bloc parent.

Division enfant¶

with: 75%;

Largeur du bloc de division plus petite que son parent.

padding: 4rem;

Marges intérieures dans la division pour espacer le contenu dans le bloc.

background-color: rgba(255,255,255,0.8);

Couleur de fond semi transparente.

margin-left: auto;
margin-right: auto;

Marges gauche et droite automatiques pour centrer horizontalement.

Bonnes pratiques¶

Il est recommandé :

d'utiliser une balise <section> pour représenter une partie importante de la page;
d'utiliser une <div> comme conteneur pour le contenu à centrer;
de limiter la largeur du contenu;
d'utiliser background-size: cover pour obtenir une image de fond réactive (responsive);
de conserver un contraste suffisant entre l'image et le texte.