Propiedad CSS background-size
La propiedad background-size se utiliza para definir el tamaño de la imagen de fondo.
La propiedad background-size es una de las propiedades de CSS3.
Esta propiedad tiene cinco valores: auto, length, percentage, cover, contain.
auto establece la imagen de fondo en su tamaño original. Es el valor predeterminado. length especifica la altura y el ancho de la imagen de fondo. Los valores negativos no son válidos. percentage establece la altura y el ancho de la imagen de fondo especificados en porcentajes. Los valores negativos tampoco son válidos.
cover escala la imagen lo más grande posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, se recorta vertical u horizontalmente para que no quede espacio.
contain redimensiona la imagen de fondo para que sea completamente visible.
Existen imágenes, como JPEG, que tienen tamaños y proporciones intrínsecos, e imágenes, como los degradados, que no los tienen. A menos que se indique lo contrario, las segundas siempre ocupan el tamaño del área de fondo de un elemento.
La propiedad background-size también acepta valores separados por comas y, cuando el elemento tiene varias imágenes de fondo, cada valor se aplicará a la imagen de fondo correspondiente. Por ejemplo, el primer valor se aplica a la primera background-image, el segundo valor a la segunda imagen, etc.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | No. |
| Animable | Sí. El tamaño de la imagen de fondo es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.backgroundSize = "50% 100%"; |
Sintaxis
Sintaxis de la propiedad CSS background-size
background-size: auto | length | percentage | cover | contain | initial | inherit;La propiedad background-size se usa a menudo con la propiedad abreviada background, por ejemplo:
background: url("image.jpg") no-repeat center / cover;Ejemplo de la propiedad background-size:
Ejemplo de la propiedad CSS background-size con valor en píxeles (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Resultado
En el ejemplo anterior, se aplica el valor length. Establece el ancho y la altura de la imagen de fondo. El primer valor establece el ancho y el segundo valor establece la altura. Si se proporciona un solo valor, el segundo se establece en auto.
Consulte otro ejemplo donde el ancho y la altura de la imagen de fondo se definen mediante porcentajes.
Ejemplo de la propiedad background-size con el valor "%":
Ejemplo de la propiedad CSS background-size con valor en % (porcentaje)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>El valor cover hace que la imagen sea lo más grande posible sin estirarla.
Ejemplo de la propiedad background-size con el valor "cover":
Ejemplo de la propiedad CSS background-size con el valor cover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Ejemplo de la propiedad background-size con el valor "contain":
Ejemplo de la propiedad CSS background-size con el valor "contain":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Ejemplo de la propiedad background-size con el valor "auto":
Ejemplo de la propiedad CSS background-size con el valor "auto":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Ejemplo de la propiedad background-size con el valor "length":
Ejemplo de la propiedad background-size con el valor "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size: 260px;
}
</style>
</head>
<body>
<h1>CSS background-size property </h1>
<p>Example of the background-size property with a length value.</p>
<div></div>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| auto | Este es el valor predeterminado. Establece la imagen de fondo en su tamaño original. | Probar » |
| length | Establece el ancho y la altura de la imagen de fondo. El primer valor establece el ancho y el segundo establece la altura. Si solo se proporciona un valor, el segundo se establece en auto. Se especifica con “px”, “em”. | Probar » |
| percentage | Establece el ancho y la altura en porcentajes. El primer valor establece el ancho y el segundo establece la altura. Si solo se proporciona un valor, el segundo se establece en auto. | Probar » |
| cover | Escala la imagen de fondo lo más grande posible para cubrir todo el área de fondo. | Probar » |
| contain | Escala la imagen de fondo al tamaño más grande posible para que su ancho y alto quepan dentro del área de fondo. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento principal. |
Práctica
En CSS, ¿cuáles son los valores posibles para la propiedad 'background-size'?