CSS: propiedad de repetición de fondo

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de repetición de fondo

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada repetición de fondo Con sintaxis y ejemplos.

describir

La propiedad background-repeat de CSS define si la imagen de fondo de un elemento se repite (es decir, en mosaico).

sintaxis

La sintaxis de la propiedad CSS de repetición de fondo es:

background-repeat: value;

parámetro o parámetro

valor

Define si la imagen de fondo se repite. Puede ser uno de los siguientes:

valor describir
repetir La imagen se repite horizontal y verticalmente
div { imagen de fondo: url(“logotipo.png”); repetición de fondo: repetir; }
repetir -x La imagen se repite horizontalmente
div { imagen de fondo: url(“logotipo.png”); repetición de fondo: repetir-x; }
repetir -y La imagen se repite verticalmente
div { imagen de fondo: url(“logotipo.png”); repetición de fondo: repetir-y; }
no repetir La imagen no se repite
div {imagen de fondo: url(“logo.png”); repetición de fondo: sin repetición; }
ronda La imagen se repite varias veces.Si no se logra un ajuste exacto, la imagen se volverá a escalar
div { imagen de fondo: url (“logo.png”); repetición de fondo: círculo; }
espacio La imagen se repite muchas veces y encaja perfectamente.Si no se logra una coincidencia exacta, se muestra un espacio en blanco entre las imágenes
div { imagen de fondo: url(“logo.png”); repetición de fondo: espacio; }
heredar El elemento heredará la repetición de fondo de su elemento principal
div { imagen de fondo: url(“logo.png”); repetición de fondo: heredar; }

notas

  • Al configurar la imagen de fondo, también debe configurar la propiedad CSS background-color en caso de que la imagen no esté disponible.

Compatibilidad del navegador

La propiedad CSS background-repeat tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Internet Explorer (IE) (IE 9+ para espacios/círculos)
  • Opera (Opera 10.5+ para espacio/redondo)
  • Safari (WebKit)

ejemplo

Discutiremos la propiedad background-repeat a continuación, explorando ejemplos de cómo usarla en CSS.

div { background-image: url("/images/gradient.png"); 
      background-repeat: repeat; }

En este ejemplo de repetición de fondo de CSS, usamos el archivo degradado.png como

La etiqueta tiene un conjunto de imágenes de fondo. Luego configuramos la imagen para que se repita horizontal y verticalmente.

También es aconsejable establecer el color de fondo al configurar la imagen de fondo, en caso de que la imagen no esté disponible. Modifiquemos nuestro ejemplo para agregar un color de fondo negro.

div { background-color: black; 
      background-image: url("/images/gradient.png"); 
      background-repeat: repeat; }

Ahora, si la imagen de degradado.png no está disponible,

Se seguirá mostrando el color de fondo negro.