Background : image et couleur de fond

case à cocher raccourci

Cette option permet de générer la propriété raccourcie background plus compacte.

Couleur de fond: background-color

Cliquez le bouton pour accéder aux sélecteur de couleurs ou entrez directement une valeur dans le champs de saisie. Voir saisie des couleurs.

image de fond background-image ▾

Vous pouvez attribuer une image de fond et définir son cadrage par rapport au rectangle de fond, le mode répétition sur l'écran du motif et le comportement au déroulement de l'écran.

• « défaut » aucune spécification d'image ;
• « none » veut dire que l'élément n'a aucune image de fond ;
• « définir image » permet d'en sélectionner une.
• « sans image» permet de spécifier les propriétés background sans celle d'une url d'image.

Une barre de défilement permet d'agrandir la miniature de l'image.

position background-position ▾ (par rapport aux bords de la boîte)

Définit comment vous souhaitez cadrer l'image par rapport à la boîte. La miniature de l'image se positionne visuellement en conséquence.

• Top, top left… positionne l'image dans la boîte ;
• px, % permet de saisir les longueurs dans l'unité demandée ;
• Longueurs permet de saisir deux unités de longueur (px, %, em...).
• Vous pouvez également déplacer la miniature de l'image dans la boîte au moyen de la souris pour générer un positionnement en %..

répétition background-repeat ▾

• Défaut équivaut à repeat ;
• repeat : l'image est répétée en mosaïque horizontale et verticale ;
• repeat-X ou repeat-Y: la mosaïque est limitée à l'horizontale ou à la verticale ;
• no-repeat : l'image n'est pas répétée.

déroulement background-attachment ▾

• « défaut » équivaut à scroll ;
• Scroll : l'image défile lorsque l'on pagine la feuille à l'écran ;
• Fixed : l'image ne bouge pas lorsque l'on pagine la feuille à l'écran.

limites background-clip ▾

Zone de la boîte CSS constituant la limite de l'arrière-plan.
Valeurs possibles : border-box | padding-box | content-box (respectivement bordure , padding ou contenu).

origine background-origin ▾

Zone de la boîte CSS servant à caler l'origine de l'image de fond.
Valeurs possibles : border-box | padding-box | content-box (respectivement bordure , padding ou contenu).

taille background-size ▾

Redimensionne l'image de fond avec un ou deux paramètres <bg-size>. La première valeur détermine la largeur (ou proportion) horizontale, la deuxième la largeur verticale. Si une seule valeur est précisée, la seconde est remplacée par "auto" avec le ratio de l'image :

• Pourcentage : redimensionne l'image en tenant compte de l'origine de l'image de fond (background-origin).
• Longueur : redimensionne l'image à la longueur définie.
• "contain" : redimensionne l'image en préservant ses proportions de manière à ce qu'elle s'ajuste aux dimensions du fond.
• "cover": redimensionne l'image en préservant ses proportions de manière à ce qu'elle couvre entièrement le fond.

Cursor

Détermine l'aspect du curseur lorsque la souris survole le fond du sélecteur. Vous pouvez personnaliser le cursor avec l'url d'une image spécifique.

Effacer

Cliquez le bouton Effacer ❌ pour effacer les réglages présents.