CSS3 : "les repeat"

no-repeat

Dans une mosaïque d'images, la propriété background-repeat contrôle la façon dont une image de background est tuilée après avoir été mise à dimension (via la propriété background-size) et positionnée (via la propriété background-position).
La valeur de cette propriété peut être l'un des mots-clés suivants : repeat-x, repeat-y, repeat, space, round, no-repeat. À part les deux premières (repeat-x et repeat-y), les autres valeurs peuvent être définies une seule fois pour l'axe des x et l'axe des y, ou définies pour chaque dimension individuellement.

repeat

Dans une mosaïque d'images, la propriété background-repeat contrôle la façon dont une image de background est tuilée après avoir été mise à dimension (via la propriété background-size) et positionnée (via la propriété background-position).
La valeur de cette propriété peut être l'un des mots-clés suivants : repeat-x, repeat-y, repeat, space, round, no-repeat. À part les deux premières (repeat-x et repeat-y), les autres valeurs peuvent être définies une seule fois pour l'axe des x et l'axe des y, ou définies pour chaque dimension individuellement.

repeat-x

Dans une mosaïque d'images, la propriété background-repeat contrôle la façon dont une image de background est tuilée après avoir été mise à dimension (via la propriété background-size) et positionnée (via la propriété background-position).
La valeur de cette propriété peut être l'un des mots-clés suivants : repeat-x, repeat-y, repeat, space, round, no-repeat. À part les deux premières (repeat-x et repeat-y), les autres valeurs peuvent être définies une seule fois pour l'axe des x et l'axe des y, ou définies pour chaque dimension individuellement.

repeat-y

Dans une mosaïque d'images, la propriété background-repeat contrôle la façon dont une image de background est tuilée après avoir été mise à dimension (via la propriété background-size) et positionnée (via la propriété background-position).
La valeur de cette propriété peut être l'un des mots-clés suivants : repeat-x, repeat-y, repeat, space, round, no-repeat. À part les deux premières (repeat-x et repeat-y), les autres valeurs peuvent être définies une seule fois pour l'axe des x et l'axe des y, ou définies pour chaque dimension individuellement.

space

Les images de fond sont distribuées au sein de l'élément , des espaces entre les images sont présents si nécessaire.
L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images.
La propriété background-position est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où space est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.

round

Les images de fond sont redimensionnées afin de remplir l'espace.
L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place.

Synthèse

background-repeat > Exemple interactif