Mettre une image de fond en CSS à l’aide de la propriété css background

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

 

CSS Propriété background – Syntaxe

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

 

AttributDescriptionValeurs
colorSpécifie la couleur#
rgb
positionSpécifie la position de l’imageleft
top
right
bottom
center
%
px
sizeSpécifie la tailleauto
%
px
contain
cover
repeatSpécifie la répétition de l’image dans le blocno-repeat
repeat
originSpécifie la position relative de l’image par rapport au conteneurpadding-box
border-box
content-box
clipSpécifie la zone d’affichage dans le conteneurpadding-box
border-box
content-box
attachmentSpécifie le comportement de l’image avec le reste de la pagefixed
local
scroll
imageIndique l’url de l’image de fondurl(‘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’image 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@

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.