Arriére plan CSS - Tutoriel CSS

Les arriéres plan et images d'arriére plan en CSS

Dans ce tutoriel, nous allons aborder la gestion des images d'arrière plan en CSS.

Les couleurs d'arriére plan

background-color: #ebf6f9;

La couleur d'arriére plan peut être exprimée en texte (Anglais) ou en héxadécimal comme la couleur du texte, que nous avons vu précédemment

En savoir + sur les couleurs HTML

Exemple

Texte sur fond bleu

Code CSS


 .fond-bleu{

     background-color: #ebf6f9; 

 }

Les images d'arriére plan

background-image: url(../images/exclamation-orange.png); /* url de l'image */
background-repeat: no-repeat; /* Ne pas répéter l'image sur X et Y*/

Par défaut, une image se répéte sur x et y, donc on doit compléter, le "background-repeat" pour agir sur la répétition.

Valeurs possibles :

repeat : l'arriére plan ou fond se répéte, valeur par défaut.
repeat-x : l'arriére plan ou fond se répéte horizontalement.
repeat-y : l'arriére plan ou fond se répéte verticalement.
no-repeat : l'arriére plan ou fond ne se répéte pas.
inherit : l'arriére plan ou fond hérite des propriétés de son parent

background-attachment : fixed;

La propriété de feuille de style css background-attachment permet de fixer l'image d'arriére plan (image de fond) lorsque l'on utilise les barres de défilement.

Valeurs possibles :

fixed, l'arriére plan ou fond reste en place quand on scrolle.
scroll, l'arriére plan ou fond se déplace quand on scroll qui est la valeur par défaut.
inherit, l'arriére plan ou fond hérite des propriétés de son parent (CSS 2).
local, l'arriére plan ou fond ne se déplace pas quand l'élément qui la contient scroll, mais avec le défilant de son contenu (CSS 3).
Valeur,Valeur, accepte plusieurs valeurs citées ci-dessus séparées pour une virgule pour les images de fond multiples (CSS 3)

background-position: left center; /* left : positionnement à gauche sur l'horizontal, center : position au centre sur la verticale*/

Alignement horizontal

left correspond à l'alignement horizontal de l'image

Valaurs possibles :

left, center, right ou une valeur qui peut être exprimée en px, pt, in, cm, mm, pc, em, ex %

Alignement vertical

center correspond à l'alignement vertical de l'image

Valaurs possibles :

top, center, bottom ou une valeur qui peut être exprimée en px, pt, in, cm, mm, pc, em, ex %

Exemple

Texte dans la boite-alerte

Code CSS

.boite-alerte {

    background-color: #FFC;

background-image: url(../images/exclamation-orange.png);

background-repeat: no-repeat;

background-position: right center; 

padding-left: 40px; /* Remplissage à gauche de 40px, Si l'on ne met pas un padding supérieur à la largeur de l'image, dans le cas où l'on saisit du texte dans la boîte, il serait placer sur l'image */ 

padding-top:15px; /* Remplissage en haut */

padding-bottom:15px;
 /* Remplissage en bas */

}

Code HTML

<div class="boite-alerte">Texte dans la boite-alerte</div>