repeat (repeat-x , repeat-y , no-repeat)

http://librosweb.es/referencia_css/background_repeat.html

background-repeat

Definición	Controla el tipo de repetición de las imágenes de fondo
Valores permitidos	Uno y sólo uno de los siguientes valores: repeat repeat-x repeat-y no-repeat inherit
Valor inicial	repeat
Se aplica a	Todos los elementos
Válida en	medios visuales
Se hereda	no
Definición en el estándar	http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat

Ejemplos de uso

La propiedad background-repeat controla la forma en la que se repiten las imágenes de fondo de los elementos. Por defecto, si la imagen de fondo que se establece con la propiedad background-image es más pequeña que el sitio disponible, el navegador repite la imagen en todas las direcciones hasta cubrir completamente la superficie del elemento:

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

Imagen original

Utilizando la propiedad background-repeat es posible controlar si la imagen de fondo se repite o no y la forma en la que se repite. El valor repeat coincide con el comportamiento por defecto del navegador y repite la imagen en todas las direcciones.

El valor no-repeat muestra la imagen de fondo sin realizar ninguna repetición:

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

Cuando la imagen no se repite, por defecto se muestra en la esquina superior izquierda del elemento. CSS permite modificar la posición de la imagen de fondo mediante la propiedadbackground-position.

Por otra parte, los valores repeat-x y repeat-y permiten repetir la imagen de fondo sólo en una dirección (horizontal o vertical). El valor repeat-x repite la imagen de forma horizontal:

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

La imagen de fondo repetida horizontalmente se muestra por defecto en la parte superior del elemento. Utilizando la propiedad background-position es posible desplazarla a otra posición:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-x;
  background-position: 30px;
}

De forma similar, el valor repeat-y se emplea para repetir la imagen de fondo verticalmente:

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

La imagen de fondo repetida verticalmente se muestra por defecto en la parte izquierda del elemento. Utilizando la propiedad background-position es posible desplazarla a otra posición:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-y;
  background-position: 30px;
}

COMPARTIR

• TW
• FB
• G+

PROPIEDADES RELACIONADAS

• background-attachment
• background-color
• background-image
• background-position
• background-repeat
• background

© 2013 LibrosWeb.es Contacto