CSS 3: La Guía Completa - Estilo background-size

1 - Un número. Con este valor podemos informar el ancho y la altura de la imagen de fondo. Este valor puede ser tanto en píxeles como en porcentaje. Ejemplo:

div {
	background: url('example.jpg') no-repeat;
	background-size: 100px;
}

Si informamos solo un número, como en el caso anterior, tanto el ancho como la altura será de 100 píxeles. Si deseamos especificar también la altura, basta con informar su valor después del primer número, como podemos ver a continuación:

div {
	background: url('example.jpg') no-repeat;
	background-size: 100px 200px;
}

Ahora hablemos sobre los valores “cover” y “contain”. Ambos tienen el mismo objetivo: hacer que la imagen de fondo ocupe el máximo posible del área donde se aplicó y también mantener la proporción de la imagen. Pero hay una pequeña diferencia entre estos dos valores.

2 - Expresión “cover”. Este valor hace que la imagen ocupe todo el espacio donde se aplicó. Pero, para eso, realiza algunos recortes en la imagen si tiene dimensiones diferentes al área de su ocupación.

3 - Expresión “contain”. Este valor hace que la imagen ocupe el máximo posible del área donde se aplicó. Sin embargo, no realiza ningún corte en la imagen. Incluso si tiene dimensiones diferentes del área de su ocupación, se garantizará que esté “contenida” en la etiqueta por completo. Si la imagen no puede contener el 100% del área, se utilizará el color de fondo de la etiqueta, si está definido.

¿Qué opinas de desarrollar un pequeño ejemplo para ver esta diferencia en la práctica?

Ejemplo

Crearemos un archivo HTML que contendrá un

, donde añadiremos un fondo. Tendrá el ID “background-example”. Este archivo HTML también hará referencia a un archivo llamado style.css, donde aplicaremos nuestros estilos CSS.

Primero probaremos el background-size informando un valor en números. El contenido del archivo CSS será el siguiente:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: 200px;
}

Explicando: nuestro

tendrá un ancho de 600 píxeles y una altura de 500 píxeles. También definimos un color de fondo gris para ver el tamaño real del

. Por último, nuestra imagen de fondo tendrá 200 píxeles tanto de ancho como de altura. Es decir, tendrá dimensiones menores que el

donde se aplicó. El resultado en el navegador será el siguiente:

La imagen se agregó como fondo sin problemas. Sin embargo, quedó mucho espacio vacío en nuestro

, ya que la imagen tenía dimensiones menores que él.

Ahora aplicaremos el valor “contain”. El contenido CSS quedará así:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: contain;
}

El resultado en nuestro navegador será este:

Ahora nuestra imagen se volvió más grande y ocupó una gran parte del

. No obstante, este fue el máximo de ocupación posible sin realizar cortes en la imagen. Así, fue necesario usar el color de fondo para terminar de ocupar el área total del

.

Finalmente, usaremos el valor “cover”. Nuestro CSS quedará de la siguiente manera:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: cover;
}

Este será el resultado en el navegador:

Ahora sí, nuestra imagen ocupó toda el área del

. Sin embargo, para que esto fuera posible sin perder su proporción, se necesitó realizar cortes en ella.

Quizás pensemos: “Pero ahora no se puede ver bien la imagen. Después de todo, se cortó gran parte de ella”. Algo que podemos hacer para solucionar este problema es usar el estilo background-position. Vamos a añadirlo a nuestro selector CSS informando como su valor la expresión “center”:

background-position: center;

El resultado en el navegador ahora será este:

La imagen se ve mucho mejor ahora, ya que está posicionada en su centro. El estilo background-position es muy interesante. Creo que podemos hablar más sobre él, pero eso será para un próximo artículo.

En este artículo vimos a través de ejemplos prácticos las diferencias entre los posibles valores para el estilo background-size. Con este conocimiento estamos ahora preparados para decidir cuándo usar este estilo y cuál de sus valores elegir.

Si te gustó este contenido, no olvides compartirlo con otras personas, eso nos ayuda mucho a seguir produciendo materiales interesantes para ustedes. ¡Nos vemos en el próximo artículo! :)

css-3

css

backround