CSS Taille de l'arrière-plan
La propriété CSS background-size
La propriété background-size vous permet de spécifier la taille des images d'arrière-plan.
La taille de l'arrière-plan peut être définie en longueurs, en pourcentages, ou en utilisant l'un des mots-clés suivants : auto , contain , ou cover .
L'exemple suivant redimensionne une image d'arrière-plan à une taille beaucoup plus petite que l'image originale (en utilisant des pixels) :
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Exemple
Définir la taille de l'arrière-plan en pixels :
#div1 {
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
} background-size - auto, contain et cover
Les valeurs de mots-clés pour background-size sont auto , contain et cover .
La valeur auto est la valeur par défaut et affiche l'image d'arrière-plan à sa taille originale.
La valeur contain redimensionne l'image pour qu'elle s'adapte à l'intérieur de la zone de contenu.
La valeur cover redimensionne l'image pour qu'elle soit aussi grande que possible afin que la zone de contenu soit complètement couverte par l'image d'arrière-plan (sa largeur et sa hauteur seront égales ou supérieures à celles de la zone de contenu).
Exemple
Définir la taille de l'arrière-plan avec contain, cover et auto :
#div1 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
#div2 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
#div3 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: auto;
} Définir les tailles de plusieurs images d'arrière-plan
La propriété background-size accepte également plusieurs valeurs (en utilisant une liste séparée par des virgules) lors de l'utilisation de plusieurs arrière-plans.
L'exemple suivant spécifie trois images d'arrière-plan, avec une valeur de background-size différente pour chacune :
Exemple
#div1 {
background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
} Image d'arrière-plan CSS de taille complète
Maintenant, nous voulons avoir une image d'arrière-plan qui couvre toute la fenêtre du navigateur à tout moment.
Les exigences sont les suivantes :
- Remplir toute la page avec l'image (sans espace blanc)
- Redimensionner l'image si nécessaire
- Centrer l'image sur la page
- Ne pas provoquer de barres de défilement
Ici, nous définissons les styles dans l'élément <html> (l'élément <html> a toujours au moins la hauteur de la fenêtre du navigateur). Ensuite, nous définissons un arrière-plan fixe et centré. Puis nous ajustons sa taille avec la propriété background-size :
Exemple
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
} Image héros CSS
Vous pouvez également utiliser différentes propriétés d'arrière-plan sur un <div> pour créer une image héros (une grande image avec du texte) et la placer où vous le souhaitez.
Exemple
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
} Propriétés d'arrière-plan CSS avancées
| Propriété | Description |
|---|---|
| background | Une propriété abrégée pour définir toutes les propriétés d'arrière-plan en une seule déclaration |
| background-clip | Spécifie la zone de peinture de l'arrière-plan |
| background-image | Spécifie une ou plusieurs images d'arrière-plan pour un élément |
| background-origin | Spécifie où l'image d'arrière-plan est/les images d'arrière-plan sont positionnées |
| background-size | Spécifie la taille de l'image d'arrière-plan/les images d'arrière-plan |