vagacode

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos la forma en que funciona esta propiedad que, genéricamente, se define con background, con ella podemos establecer tanto un color como una imagen de fondo a cualquier etiqueta.

background es una forma de escribir de modo resumido una serie de propiedades que controlan distintos parámetros y que también pueden ser definidas de manera individual. Una de ellas es la propiedad background-repeat que permite establecer la forma en que mostrará esa imagen.

Por defecto el valor es repeat e indica que la imagen se repetirá como un mosaico horizontal y verticalmente hasta ocupar todo el ancho y alto del elemento al que la agregamos; esto es lo que solemos hacer para llenar un determinado espacio con una imagen pequeña.

Los valores repeat-x y repeat-y repiten la imagen como mosaico pero sólo un una dirección, la primera, horizontalmente y la segunda, verticalmente.

Un valor de no-repeat hará lo contrario, la imagen no se repetirá y es lo que usamos para mostrar un logo o cosas similares.

El CSS3 incorporó dos nuevos valores pero, durante años, estos sólo funcionaban en Opera y en IE9. Recientemente ya los han incorporado todos pero, sigue habiendo dudas respecto a cómo son interpretados en Android; aparentemente, en Firefox funcionan bien pero en Chorme sólo parcialmente.

¿Y cuál es la novedad y para que sirven? Cuando repetimos una imagen para colocarla como fondo, la imagen puede cortarse en cualquier parte, todo depende de su dimensión y de la dimensión del contenedor; por eso, generalmente se posiciona centrándola para repartir esas imperfecciones.

El valor space lo que hace es evitar esos cortes de tal modo de distribuir la imagen de modo parejo, dejando espacios en blanco e ignorando por completo el valor que se haya establecido en background-position.

El valor round también distribuye la imagen de modo parejo pero sin dejar espacios para lo cual, la imagen se re-dimensiona.

Uno podría decir que space es lo que da un mejor resultado pero mucho cuidado porque esod ependerá de la imagen. En el ejemplo, esa imagen tiene el mismo color de fondo que el contenedor así que los espacios vacios se disimulan. Sin embargo, ¿qué pasará con otro tipo de imagen?