Tutoriels >> Tutoriel Image de fond en CSS (background-image)

Mettre une image de fond en CSS à l'aide de la proprité css background


Comment gérer une image de fond en CSS avec la prorité background.

 

CSS Propriété background - Syntaxe

background: color position/size repeat origin clip attachment image;

 

AttributDescriptionValeurs
color Spécifie la couleur #
rgb
position Spécifie la position de l'image left
top
right
bottom
center
%
px
size Spécifie la taille auto
%
px
contain
cover
repeat Spécifie la répétition de l'image dans le bloc no-repeat
repeat
origin Spécifie la position relative de l'image par rapport au conteneur

padding-box
border-box
content-box

clip Spécifie la zone d'affichage dans le conteneur padding-box
border-box
content-box
attachment Spécifie le comportement de l'image avec le reste de la page fixed
local
scroll
image Indique l'url de l'image de fond url('chemin/nom.ext')

 

 

Image de fond en css fixe et centrée

 

Exemple de code css:

#monDiv { background: url("images/monfond.jpg") no-repeat fixed center top rgb(0, 0, 0); }

Voir quelques exemples de sites avec une image de fond  www.randorunning.com  www.piscine-terrasse-et-compagnie.com

 


Image de fond dans un champ texte de formulaire

Exemple de code css :

 background: url("../../uploads/images/rch_loupe.png") no-repeat scroll 0 3px rgb(255, 255, 255);
Voir un exemple de site avec une image de fond dans un champ texte d'un formulaire de recherche http://www.piscine-terrasse-et-compagnie.com. Jouer avec un exemple jsfiddle

 

Alignement de l'mage de fond

Image de fond alignée à droite

background: url("../../uploads/images/rch_loupe.png") no-repeat 100% top;
background: url("../../uploads/images/rch_loupe.png") no-repeat right top;

Jouer avec un exemple jsfiddle

 

 


 

Et voil@