Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (XII)

10.11. background-repeat

Este atributo indica la forma en que se repite la imagen de fondo. Puede tener los siguientes valores: repeat, no-repeat, repeat-x, repeat-y, space, round.

Valor repeat, es el valor por defecto, la imagen se repite en el eje x (horizontalmente) y en el eje y verticalmente) hasta cubrir el área del contenido. Al repetir una imagen se pueden conseguir efectos de textura y otro tipo de efectos, por ejemplo al repetir esta imagen se consigue crear una barra con volumen:.

Barra creada al repetir imagen

Valor no-repeat, la imagen no se repite, por defecto se alineará a la izquierda, pero podemos controlar la alineación con el atributo background-position, que veremos a continuación. Un ejemplo con la alineación por defecto es este:

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

Valor repeat-x, la imagen se repite solamente en el eje x (horizontalmente) hasta llegar a la anchura del contenido. Por ejemplo:

Valor repeat-y, la imagen se repite solamente en el eje y (verticalmente) hasta llegar a la altura del contenido. Por ejemplo:

Valor space, la imagen se repite en ambos ejes hasta cubrir el área del contenido, pero no se recorta en ningún caso, en su lugar se rellena con espacios. Por ejemplo:

Valor round, la imagen se repite en ambos ejes hasta cubrir el área del contenido, pero no se recorta en ningún caso, en su lugar se modifica la forma para adaptarla al espacio disponible, es decir la imagen se estira o achata un poco para ajustarla sin tener que recortarla. Por ejemplo:

Enero-2019 (V 2.2)

Pág. 10.12

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies