Background-repeat - Astuces CSS

Anonim

Si une background-imagepropriété est spécifiée, la background-repeatpropriété en CSS définit si (et comment) elle se répétera. Voici un exemple:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Voici les valeurs possibles pour cette propriété (en plus des choses habituelles comme inherit):

  • repeat: tuile l'image dans les deux sens. Ceci est la valeur par défault.
  • repeat-x: tuile l'image horizontalement
  • repeat-y: tuile l'image verticalement
  • no-repeat: ne tuile pas, montre juste l'image une fois
  • space: tuile l'image dans les deux sens. Ne recadrez jamais l'image à moins qu'une seule image ne soit trop grande pour tenir. Si plusieurs images peuvent tenir, espacez-les de manière événementielle les images touchant toujours les bords.
  • round: tuile l'image dans les deux sens. Ne recadrez jamais l'image à moins qu'une seule image ne soit trop grande pour tenir. Si plusieurs images peuvent tenir dans l'espace restant, écrasez-les ou étirez-les pour remplir l'espace. S'il reste moins de la moitié de la largeur de l'image, étirez, si c'est plus, étirez.

Il existe également la syntaxe à deux valeurs:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Ce qui rend les syntaxes à valeur unique simplement un raccourci pour la syntaxe à deux valeurs. Par exemple, roundc'est vraiment round round.

Vous pouvez également séparer plusieurs valeurs par des virgules si vous utilisez plusieurs arrière-plans.

Démo

Voir le Pen
background-repeat par CSS-Tricks (@ css-tricks)
sur CodePen.

Démo interactive sur la façon spaceet le roundtravail, par rapport à repeat:

Voir le Pen
The Different `background-repeat`s de Chris Coyier (@chriscoyier)
sur CodePen.

Une autre démo de redimensionnement, montrant une «fausse» bordure:

Voir l'
image de la bordure ajustée au stylet en toute simplicité par ShopTalk Show (@shoptalkshow)
sur CodePen.

Voici une autre démonstration amusante avec des hamburgers en démonstration background-repeat: round;.

En rapport

  • background-attachment
  • clip de fond
  • Couleur de l'arrière plan
  • image de fond
  • background-origin
  • position de fond
  • taille de fond

Ressources

  • Spécification CSS3
  • MDN

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

La synta à valeurs multiples séparées par des virgules n'est prise en charge que dans Firefox 3.6+ et IE 9+. La syntaxe à deux valeurs pour contrôler les valeurs horizontales et verticales séparées n'est prise en charge que dans Firefox 13+ et IE 9+. Les mots-clés roundet spacesont uniquement Firefox 49+ et IE 9+.