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;
| Attribut | Description | Valeurs |
|---|---|---|
| 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’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@