Background : image et couleur de fond

propriétés gérées:
background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, cursor, scrollbar-base-color

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 background-color 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 (par rapport aux bords de la boîte) background-position

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 (sur le fond) 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.

background-clip (CSS3)

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).

background-origin (CSS3)

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).

background-size (CSS3)

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.

bg-size:

  • 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.

Scrollbar

Cochez la case assortir scrollbar pour donner à la barre de défilement une couleur proche de celle du fond : Internet Explorer sous Windows weulement.

Cursor

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

Effacer réinitialiser les réglages de styles

Cliquez ce bouton pour effacer les réglages présents.

Positions en unités de longueur

Les longueurs spécifiées en pixels servent à positionner précisément l'image sur le fond ou à découper les portions d'une image unique. Si vous avez sur une page plusieurs fonds possèdant une image distincte, il est préférable en termes de performances de les regrouper dans une image unique pour réduire le nombre de requêtes sur le serveur : 8 fonds différents avec des images distinctes représentent 8 appels au lieu d'un seul si elle tiennent dans la même image.

Mettez le menu local Position-image par rapport sur Longueurs (toutes unités permises), px (unité par défaut = pixels) ou % (unité par défaut = %). 2 champs de saisie - largeur et hauteur apparaissent.

Exemples de positionnement et de répétition

10% 23%/no-repeat right top/repeat-y
center/repeat-x bottom right /repeat