Propiedad CSS background-size
background-size es una propiedad CSS que establece el tamaño de la background-image. Conoce sus valores y prueba ejemplos por ti mismo.
La propiedad CSS background-size establece el tamaño renderizado de la imagen de fondo de un elemento. Por defecto, una imagen de fondo se muestra con su tamaño natural (intrínseco); background-size permite escalarla a dimensiones exactas, ajustarla mediante porcentajes o hacer que llene o encaje automáticamente en el elemento.
Esta página cubre todos los valores que acepta la propiedad, la diferencia entre las dos palabras clave más útiles (cover y contain), cómo se comporta con múltiples fondos y ejemplos ejecutables para cada caso. Es una de las propiedades de CSS3.
Valores de un vistazo
La propiedad acepta los siguientes valores:
auto— el valor predeterminado. La imagen mantiene su tamaño y proporciones intrínsecas.<length>— ancho y alto explícitos, por ejemplo300px 200px. Los valores negativos no son válidos.<percentage>— tamaños relativos al área de posicionamiento del fondo del elemento, por ejemplo40% 100%. Los valores negativos no son válidos.cover— escala la imagen (manteniendo su proporción de aspecto) hasta que cubre completamente el elemento. El exceso se recorta.contain— escala la imagen (manteniendo su proporción de aspecto) hasta que encaja justo dentro del elemento. Pueden quedar espacios vacíos.
Cuando se proporcionan dos valores, el primero corresponde al ancho y el segundo a la altura. Si se proporciona solo un valor, establece el ancho y la altura toma el valor auto por defecto, de modo que la imagen mantiene su proporción de aspecto.
cover vs. contain — cuál usar
Estas dos palabras clave son las más utilizadas y es fácil confundirlas:
covergarantiza que no haya espacio vacío — la imagen siempre llena el contenedor. La desventaja es que partes de la imagen pueden recortarse cuando su proporción de aspecto no coincide con el elemento. Úsalo para banners hero y fondos de sección a sangre completa donde nunca quieres huecos.containgarantiza que la imagen completa sea visible — nada se recorta. La desventaja es que pueden aparecer franjas vacías en los lados o en la parte superior/inferior. Úsalo para logotipos, iconos o cualquier imagen que debas mostrar completa.
Ambos mantienen la proporción de aspecto original, por lo que la imagen nunca se distorsiona. Para estirar una imagen a dimensiones exactas (lo cual puede distorsionarla), utiliza valores explícitos de <length> o <percentage> en su lugar.
Imágenes con y sin tamaño intrínseco
Algunas imágenes, como JPEG y PNG, tienen tamaños y proporciones intrínsecas. Otras, como los degradados CSS, no los tienen. Una imagen sin tamaño intrínseco ocupa el tamaño completo del área de fondo del elemento salvo que se indique lo contrario, por lo que background-size se comporta de forma ligeramente diferente con degradados que con imágenes rasterizadas.
Múltiples imágenes de fondo
background-size acepta valores separados por comas. Cuando un elemento tiene varias imágenes de fondo, cada tamaño se asocia a una imagen de fondo en orden — el primer valor se aplica a la primera background-image, el segundo a la segunda, y así sucesivamente:
background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;| 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 frecuentemente con la abreviatura 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 px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/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 de longitud. Establece el ancho y el alto de la imagen de fondo. El primer valor establece el ancho y el segundo establece el alto. Si se proporciona un solo valor, el segundo se establece en auto.
Veamos otro ejemplo donde el ancho y el alto de la background-image se definen mediante porcentajes.
Ejemplo de la propiedad background-size con el valor "%":
Ejemplo de la propiedad CSS background-size con valor % (porcentaje)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/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("/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("/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("/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 un único valor de longitud:
Aquí se proporciona un único valor (260px), por lo que el ancho se establece explícitamente y la altura recurre a auto, preservando la proporción de aspecto de la imagen dentro de un <div> de tamaño fijo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("/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 | Pruébalo |
|---|---|---|
| auto | Es el valor predeterminado. Muestra la background-image con su tamaño original. | Pruébalo » |
| length | Establece el ancho y el alto de la imagen de fondo. El primer valor establece el ancho y el segundo establece el alto. Si solo se proporciona un valor, el segundo se establece en auto. Se especifica con "px", "em". | Pruébalo » |
| percentage | Establece el ancho y el alto mediante porcentajes. El primer valor establece el ancho y el segundo establece el alto. Si solo se proporciona un valor, el segundo se establece en auto. | Pruébalo » |
| cover | Escala la imagen de fondo lo más grande posible para cubrir toda el área del fondo. | Pruébalo » |
| contain | Escala la imagen de fondo al mayor tamaño posible de modo que su ancho y alto quepan dentro del área del fondo. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad del elemento padre. |
Consejos y propiedades relacionadas
background-sizese combina habitualmente conbackground-positionybackground-repeatpara controlar exactamente cómo se coloca y escala la imagen.- En la abreviatura
background, el tamaño va después de la posición, separado por una barra:background: url("image.jpg") no-repeat center / cover;. La posición es obligatoria cuando se proporciona un tamaño de esta forma. - Para escalar un elemento
<img>(en lugar de un fondo CSS) controlando el recorte, usaobject-fit, que ofrece el mismo comportamiento decoverycontainpara elementos reemplazados. coverycontainsimplifican los fondos a página completa o responsivos: combinarbackground-size: covercon unbackground-attachmentfijo produce un hero clásico a sangre completa que se adapta a cualquier viewport.