background-repeat

Prubalo

background-repeat: repeat-x;

background-repeat: repeat;

background-repeat: space;

background-repeat: round;

background-repeat: no-repeat;

background-repeat: space repeat;

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background: #ccc url("/shared-assets/images/examples/moon.jpg") center / 120px;
  min-width: 100%;
  min-height: 100%;
}

/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Por defecto, las imgenes repetidas son ajustadas al tamao del elemento, pero pueden ser reescaladas para ajustarse (usando round) o igualmente distribuido desde un extremo a otro (usando space).

Sintaxis

Valores

<repeat-style>

Los atributos de valor nico son una abreviacin de los atributos de doble valor.

Valor nico	Doble valor equivalente
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

En los atributos de doble valor, el primer valor se comporta usando la repeticin horizontal y el segundo valor representa el comportamiento de repeticin vertical. Aqu se explica como cada opcin funciona con cada direccin:

repeat	La imagen se repite hasta cubrir todo el fondo existente. La ltima imagen debe ser recortada si no encaja.
space	La imagen se repite lo mximo posible sin recortarse. La primera y ltima imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imgenes. La propiedad background-position es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El nico caso donde se recorta usando space es cuando no hay suficiente sitio para desplegar una imagen.
round	Como el espacio permitido aumenta, las imgenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea aadida. Cuando la prxima imagen es aadida, todas las dems son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debera estirarse hasta que el tamao sea de 300px, luego otra imagen debe ser aadida. Luego deberan comprimirse hasta los 225px.
no-repeat	La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posicin del fondo no repetido es definida por la propiedad de CSS background-position.

Sintaxis formal

background-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

Ejemplos

HTML

<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(star-solid.gif);
  width: 160px;
  height: 70px;
}

/* Background repeats */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* Multiple images */
.seven {
  background-image:
    url(star-solid.gif), url(/shared-assets/images/examples/favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

Resultado

En este ejemplo,cada elemento de la listcoincide con un valor diferente de background-repeat.

Especificaciones

Compatibilidad con navegadores

Mira tambin

• Usando diferentes fondos