Vous êtes ici : Accueil >> CSS >> Propriétées et mises en forme CSS >> Mise en forme de l'arrière plan en css-Propriété background

Mise en forme de l'arrière plan en css-Propriété background


background-color
background-image
background-repeat
background-attachment
background-position

background-color

La propriété background-color permet de définir la couleur de fond à l'élément auquelle elle est attaché.
Exemple
H1 {background-color: #FF0000;}  Couleur de fond rouge
H1 {background-color: #70CF00;}  Couleur de fond vert
Voir un exemple

background-image

La propriété background-image permet de définir une image de fond à l'élément auquelle elle est attaché. 
Exemple
H1 {background-image: url(http://www.google.fr/intl/fr_fr/images/logo.gif);}
  Affichera le logo Google en image de fond de façon répété selon la longueur du texte contenue dans la balise auquelle elle est attaché.
Voir un exemple

background-repeat

La propriété background-repeat permet de définir de quelle façon l'image de fond sera répété ou pas.
background-repeat: repeat-x;  Permet de répété l'image de fond dans le sens de la longueur.
background-repeat: repeat-y;  Permet de répété l'image de fond dans le sens de la hauteur.
background-repeat: no-repeat; Ne répéte pas l'image de fond.
Exemple
H1 {background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif);
background-repeat: repeat-x;}
 
H1 {background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif);
background-repeat: repeat-y;}
 
H1 {background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif);
background-repeat: no-repeat;}
Voir un exemple

background-attachment

La propriété background-attachment permet de définir si l'image d'arrière plan associé à background-image est fixe ou pas.
background-attachment: fixed; Permet que l'arrière plan ou fond reste en place quand on scrolle la page.
background-attachment: scroll; Permet que l'arrière plan ou fond bouge quand on scrolle la page.
Exemple
body {background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif);
background-attachment: fixed;}
Voir un exemple
body {background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif);
background-attachment: scroll;}
Voir un exemple

background-position

La propriété background-position permet de définir la position de l'image dans la page. 
background-position: top left  Image positionné en haut à gauche
background-position: top center  Image positionné en haut à droite
background-position: top right  Image positionné en haut à droite
background-position: center left  Image positionné au centre à gauche
background-position: center center  Image positionné au centre
background-position: center right Image positionné au centre à droite
background-position: bottom left  Image positionné en bas à gauche
background-position: bottom center Image positionné au centre du bas
background-position: bottom right Image positionné en bas à droite
background-position: 150px 50px;  Image positionné à 150 pixel du bord gauche et 50 pixel du haut
background-position: 50% 50%  Image positionné à 50% du bord gauche et 50 % du haut, ce qui revient à faire un background-position: center center.
Exemple
.exemple {
/*image positionné en haut à gauche*/
background-position: top left;
/*l'image de fond*/
background-image:url(images/feed.png);
/*on ne répète pas l'image*/
background-repeat: no-repeat;
/*bordure noir de 2 pixel*/
border: 2px solid #000000;  
/*cadre de 250 pixel de longueur et de hauteur*/
width: 250px;
height: 250px;
/*arrière plan du cadre de couleur noir*/
background-color: #000000;
/*police d'ecriture de couleur blanche*/
color: #FFFFFF
}
Voir un exemple

Catégorie CSS

Commentaire sur : Mise en forme de l'arrière plan en css-Propriété background
Signaler une erreurSignaler une erreur

Mise en forme de la police en css-Propriété fontMise en forme de la police en css-Propriété fontPropriétées et mises en forme CSSPropriétées et mises en forme CSS Mise en forme des listes en CSSMise en forme des listes en CSS