logo oujood
🔍

CSS3 Backgrounds nouvelles propriétés d'arrière-plan

CSS3 contient plusieurs nouvelles propriétés d'arrière-plan, qui permettent un meilleur contrôle de l'élément background.
Dans ce chapitre, vous apprendrez les propriétés d'arrière-plan suivantes :
background-size
background-origin
Plusieurs Images d’arrière plans :Vous apprendrez également comment utiliser plusieurs images d'arrière-plan.

OUJOOD.COM

Arrière-plans CSS3

CSS3 cours tutorial

Support des navigateurs modernes

Support actuel (2024) : Toutes les propriétés CSS3 d'arrière-plan sont entièrement supportées par tous les navigateurs modernes : Chrome, Firefox, Safari, Edge et Opera. Ces fonctionnalités sont stables et utilisables en production sans préfixes vendeur.
Propriété Support moderne Depuis
background-size Support complet Chrome 4+, Firefox 4+, Safari 5+, IE 9+
background-origin Support complet Chrome 4+, Firefox 4+, Safari 5+, IE 9+
background-clip Support complet Chrome 4+, Firefox 4+, Safari 5+, IE 9+
background-attachment Support complet Tous navigateurs depuis CSS2.1

CSS3 La propriété background-size

La propriété background-size spécifie la taille de l'image d'arrière-plan.

Cette propriété permet de contrôler précisément la taille de l'image d'arrière-plan. Avant CSS3, la taille de l'image de fond était déterminée par la taille réelle de l'image. Avec CSS3, il est possible de spécifier la taille de l'image de fond, ce qui permet de réutiliser les mêmes images d'arrière-plan dans des contextes différents.

Vous pouvez spécifier la taille en pixels, en pourcentage, ou utiliser les valeurs spéciales cover, contain et auto. Lorsque vous indiquez une taille, celle-ci dépend de la largeur et de la hauteur de l'élément parent.

Valeurs principales :
• cover : L'image couvre entièrement le conteneur
• contain : L'image entière reste visible dans le conteneur
• auto : Taille originale de l'image
• Dimensions précises : pixels (200px 100px) ou pourcentages (100% 50%)

Voici l'image d'origine utilisée dans les exemples suivants : Image d'arbre utilisée dans les exemples

Exemple 1 : Redimensionner une image d'arrière-plan

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>background-size dimensions</title>
<style> 
body {
    background: url(https://www.oujood.com/css3/images/arbre.gif);
    background-size: 80px 60px;
    background-repeat: repeat-x;
    padding-top: 90px;
}
</style>
</head>
<body>
    <p>Image d'origine : <img src="https://www.oujood.com/css3/images/arbre.gif" alt="Arbre" width="224" height="162"></p>
</body>
</html>

Exemple 2 : Étirer l'image pour remplir complètement la zone

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>background-size étirage</title>
<style> 
body {
    background: url(https://www.oujood.com/css3/images/arbre.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 30em;
}
</style>
</head>
<body>
</body>
</html>

Exemple 3 : Valeurs modernes cover, contain et auto

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>background-size valeurs modernes</title>
<style> 
.container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.demo {
    width: 300px;
    height: 200px;
    border: 2px solid #333;
    background-image: url('https://www.oujood.com/css3/images/arbre.gif');
    background-repeat: no-repeat;
    background-position: center;
}
.cover { 
    background-size: cover; 
    background-color: #f0f0f0;
}
.contain { 
    background-size: contain; 
    background-color: #f0f0f0;
}
.auto { 
    background-size: auto; 
    background-color: #f0f0f0;
}
</style>
</head>
<body>

<div class="container">
    <div class="demo cover">
        <p style="background: rgba(255,255,255,0.8); padding: 5px; margin: 5px;">
            background-size: cover
        </p>
    </div>
    
    <div class="demo contain">
        <p style="background: rgba(255,255,255,0.8); padding: 5px; margin: 5px;">
            background-size: contain
        </p>
    </div>
    
    <div class="demo auto">
        <p style="background: rgba(255,255,255,0.8); padding: 5px; margin: 5px;">
            background-size: auto
        </p>
    </div>
</div>

</body>
</html>

CSS3 La propriété background-origin

La propriété background-origin spécifie la zone de positionnement des images d'arrière-plan.

Cette propriété, introduite dans CSS3, définit l'aire de positionnement d'un élément d'arrière-plan. Elle vous permet de spécifier si l'arrière-plan sera positionné par rapport à la zone de contenu, la zone de bordure ou la zone de padding.

Valeur Description
border-box Positionne par rapport à la bordure (défaut)
padding-box Positionne par rapport au padding
content-box Positionne par rapport au contenu

Exemple : Position de l'image d'arrière-plan selon les différentes zones

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
<style> 
div {
    width: 30em;
    border: 5px solid #00ffff;
    margin-top: 2em;
    padding: 25px;
    background-image: url('https://www.oujood.com/css3/images/regular-smile.gif');
    background-repeat: no-repeat;
    background-position: left;
}
#div1 {
    background-origin: border-box;
}
#div2 {
    background-origin: padding-box;
}
#div3 {
    background-origin: content-box;
}
</style>
</head>
<body>

<div id="div1">
    <p><strong>background-origin: border-box</strong></p>
    <p>Voici un texte pour le remplissage du paragraphe. Ce texte de remplissage sert uniquement à donner du contenu au paragraphe pour illustrer l'exemple.</p>
</div>

<div id="div2">
    <p><strong>background-origin: padding-box</strong></p>
    <p>Voici un texte pour le remplissage du paragraphe. Ce texte de remplissage sert uniquement à donner du contenu au paragraphe pour illustrer l'exemple.</p>
</div>

<div id="div3">
    <p><strong>background-origin: content-box</strong></p>
    <p>Voici un texte pour le remplissage du paragraphe. Ce texte de remplissage sert uniquement à donner du contenu au paragraphe pour illustrer l'exemple.</p>
</div>

</body>
</html>

CSS3 La propriété background-clip

La propriété background-clip détermine la zone d'affichage de l'arrière-plan. Elle contrôle si l'arrière-plan d'un élément s'étend sous sa boîte de bordure, sa boîte de padding ou sa boîte de contenu.

Valeur Comportement
border-box L'arrière-plan s'étend jusqu'aux bordures (défaut)
padding-box L'arrière-plan s'arrête au bord du padding
content-box L'arrière-plan ne couvre que le contenu

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>background-clip</title>
<style> 
.demo-box {
    width: 300px;
    height: 150px;
    border: 10px solid rgba(255,0,0,0.5);
    padding: 20px;
    margin: 20px;
    background: linear-gradient(45deg, #3498db, #2980b9);
}
.border-clip { background-clip: border-box; }
.padding-clip { background-clip: padding-box; }  
.content-clip { background-clip: content-box; }
</style>
</head>
<body>

<div class="demo-box border-clip">
    <h4>border-box (défaut)</h4>
    <p>L'arrière-plan s'étend jusqu'aux bordures rouges.</p>
</div>

<div class="demo-box padding-clip">
    <h4>padding-box</h4>
    <p>L'arrière-plan s'arrête au bord du padding.</p>
</div>

<div class="demo-box content-clip">
    <h4>content-box</h4>
    <p>L'arrière-plan ne couvre que le contenu.</p>
</div>

</body>
</html>

CSS3 La propriété background-attachment

La propriété background-attachment définit si l'arrière-plan reste fixe lors du défilement ou s'il défile avec le contenu.

Valeur Comportement
scroll L'arrière-plan défile avec le contenu (défaut)
fixed L'arrière-plan reste fixe par rapport à la fenêtre
local L'arrière-plan défile avec le contenu de l'élément

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>background-attachment</title>
<style> 
body {
    height: 200vh; /* Pour créer un défilement */
}
.fixed-bg {
    height: 400px;
    background-image: url('https://www.oujood.com/css3/images/arbre.gif');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.scroll-bg {
    height: 400px;
    background-image: url('https://www.oujood.com/css3/images/fleurs1.gif');
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<div class="fixed-bg">
    <h2 style="color: white; text-align: center; padding-top: 150px; text-shadow: 2px 2px 4px black;">
        Arrière-plan fixe (fixed)
    </h2>
</div>

<div style="height: 300px; background: white; padding: 20px;">
    <h3>Contenu qui défile</h3>
    <p>Faites défiler la page pour voir l'effet de background-attachment.</p>
</div>

<div class="scroll-bg">
    <h2 style="color: white; text-align: center; padding-top: 150px; text-shadow: 2px 2px 4px black;">
        Arrière-plan qui défile (scroll)
    </h2>
</div>

</body>
</html>

CSS3 Plusieurs images d'arrière-plan

CSS3 vous permet d'utiliser plusieurs images d'arrière-plan pour un élément. Les images sont empilées les unes sur les autres, la première déclarée étant au premier plan.

Exemple : Définir plusieurs images d'arrière-plan

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Arrière-plans multiples</title>
<style> 
body {
    background-image: 
        url(https://www.oujood.com/css3/images/fleurs1.gif),
        url(https://www.oujood.com/css3/images/arbre.gif);
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    min-height: 100vh;
}
</style>
</head>
<body>
    <h1>Arrière-plans multiples</h1>
    <p>Cette page utilise deux images d'arrière-plan positionnées différemment.</p>
</body>
</html>

CSS3 Propriété raccourcie background

La propriété background permet de définir toutes les propriétés d'arrière-plan en une seule déclaration.

Syntaxe complète :
background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip];

Exemple :   📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Propriété raccourcie background</title>
<style> 
.exemple1 {
    /* Syntaxe longue traditionnelle */
    background-color: #f0f0f0;
    background-image: url('https://www.oujood.com/css3/images/arbre.gif');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

.exemple2 {
    /* Syntaxe raccourcie équivalente */
    background: #f0f0f0 url('https://www.oujood.com/css3/images/arbre.gif') 
                no-repeat center top / contain;
}

.exemple3 {
    /* Arrière-plans multiples avec raccourci */
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('https://www.oujood.com/css3/images/fleurs1.gif') center/cover no-repeat;
}

.demo-shorthand {
    height: 200px;
    margin: 20px 0;
    border: 2px solid #333;
    padding: 20px;
    color: white;
    text-shadow: 1px 1px 2px black;
}
</style>
</head>
<body>

<div class="demo-shorthand exemple1">
    <h4>Syntaxe longue</h4>
    <p>Propriétés définies séparément</p>
</div>

<div class="demo-shorthand exemple2">
    <h4>Syntaxe raccourcie</h4>
    <p>Toutes les propriétés en une ligne</p>
</div>

<div class="demo-shorthand exemple3">
    <h4>Arrière-plans multiples</h4>
    <p>Overlay + image de fond</p>
</div>

</body>
</html>
Conseil : Utilisez la propriété raccourcie background pour un code plus concis. Attention à l'ordre des valeurs et n'oubliez pas la barre oblique / qui sépare position et taille : position / size.
Bonnes pratiques :
  • Toujours spécifier une couleur de fond de secours
  • Optimiser les images pour le web (format, taille, compression)
  • Tester sur différents appareils et tailles d'écran
  • Considérer l'accessibilité (contraste, alternatives)
Par carabde 10 mars 2014 - Mis à jour 2024

chapitre précédent   chapitre suivant