Repetición de fondo - Trucos CSS

Tabla de contenido

Si background-imagese especifica una propiedad, la background-repeatpropiedad en CSS define si (y cómo) se repetirá. He aquí un ejemplo:

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

Estos son los valores posibles para esta propiedad (además de las cosas habituales como inherit):

  • repeat: mosaico de la imagen en ambas direcciones. Este es el valor predeterminado.
  • repeat-x: mosaico de la imagen horizontalmente
  • repeat-y: mosaico de la imagen verticalmente
  • no-repeat: no en mosaico, solo muestra la imagen una vez
  • space: mosaico de la imagen en ambas direcciones. Nunca recorte la imagen a menos que una sola imagen sea demasiado grande para caber. Si caben varias imágenes, sepárelas eventualmente imágenes que siempre toquen los bordes.
  • round: mosaico de la imagen en ambas direcciones. Nunca recorte la imagen a menos que una sola imagen sea demasiado grande para caber. Si varias imágenes pueden caber en el espacio sobrante, aplástalas o estíralas para llenar el espacio. Si queda menos de la mitad de un ancho de imagen, estírelo, si es más, estírelo.

También existe la sintaxis de dos valores:

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

Lo que hace que las sintaxis de un solo valor sean una abreviatura de la sintaxis de dos valores. Por ejemplo, roundes realmente round round.

También puede separar varios valores por comas si se trata de varios fondos.

Manifestación

Vea la
repetición de fondo de la pluma por CSS-Tricks (@ css-tricks)
en CodePen.

Demostración interactiva sobre cómo spacey roundtrabajar, en comparación con repeat:

Vea los
`background-repeat`s de Pen The Different de Chris Coyier (@chriscoyier)
en CodePen.

Otra demostración de cambio de tamaño, que muestra un borde "falso":

Vea la
imagen de borde ajustada con lápiz de la manera fácil de ShopTalk Show (@shoptalkshow)
en CodePen.

Aquí hay otra demostración divertida con demostraciones de hamburguesas background-repeat: round;.

Relacionado

  • adjunto de fondo
  • clip de fondo
  • color de fondo
  • imagen de fondo
  • origen de fondo
  • posición de fondo
  • tamaño de fondo

Recursos

  • Especificación CSS3
  • MDN

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

La sintaxis de varios valores separados por comas solo es compatible con Firefox 3.6+ e IE 9+. La sintaxis de dos valores para controlar los valores horizontales y verticales separados solo es compatible con Firefox 13+ e IE 9+. Las palabras clave roundy spaceson solo Firefox 49+ e IE 9+.

Articulos interesantes...