Propiedad background-size

La propiedad background-size establece el tamaño de la imagen de fondo. Los valores de la propiedad son cualquiera de las unidades para tamaños, o las palabras clave auto, cover o contain.

Sintaxis

selector {
	background-size: valor;
}

Palabras clave

Valor	Descripción
`auto`	El fondo tendrá su tamaño natural, como el tamaño real de la imagen de fondo. Si `auto` se especifica solo para un lado, entonces en ese lado el fondo se escalará para mantener las proporciones sin distorsión.
`cover`	Escala la imagen para que cubra completamente el bloque manteniendo las proporciones. La imagen intentará caber completamente, pero no siempre lo logrará, por lo que alguna parte de ella será recortada. El bloque siempre estará cubierto completamente por la imagen.
`contain`	Escala la imagen para que quepa completamente dentro del bloque manteniendo las proporciones. Puede ocupar todo el ancho o toda la altura (depende de las proporciones de la imagen y de las dimensiones del elemento). En general, el bloque no estará cubierto completamente por la imagen (pero la imagen siempre será completamente visible, aunque en una versión reducida).

Valor por defecto: auto.

Uso

Las unidades para tamaños y auto pueden usarse en varias combinaciones, por ejemplo: auto 20px, o 30% 20px, o auto 30%, etc. En este caso, el primer parámetro establece el tamaño del fondo en anchura, y el segundo parámetro - el tamaño del fondo en altura. Si se especifica un solo parámetro, este establecerá el tamaño del fondo tanto en anchura como en altura simultáneamente.

Ejemplo

Ahora la imagen de fondo tendrá su tamaño natural:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

Ejemplo

Ahora la imagen de fondo tendrá un tamaño de 300px por 400px (en nuestro caso las proporciones de la imagen se distorsionarán):

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ejemplo

Ahora la imagen de fondo tendrá un tamaño de 400px por 400px (en nuestro caso las proporciones de la imagen se distorsionarán):

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ejemplo

Ahora la imagen de fondo tendrá un tamaño de 400px horizontalmente, y verticalmente su tamaño se ajustará para que las proporciones no se distorsionen:

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ejemplo

Ahora la imagen de fondo tendrá un tamaño de 400px verticalmente, y horizontalmente su tamaño se ajustará para que las proporciones no se distorsionen:

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ejemplo . Valor contain

Observe el funcionamiento del valor contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Ejemplo . Valor cover

Observe el funcionamiento del valor cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Ejemplo . Mejorar el funcionamiento de cover

El funcionamiento del valor cover se puede mejorar centrando la imagen con la propiedad background-position (en nuestro caso, las partes visibles empezarán a mostrar las cabezas de los caballos, y no sus traseros):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Véase también

la propiedad background,
que es una propiedad abreviada para el fondo