Propiedad de tamaño de fondo CSS
Ejemplo
Especifique el tamaño de una imagen de fondo con "auto" y en píxeles:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La background-sizepropiedad especifica el tamaño de las imágenes de fondo.
Hay cuatro sintaxis diferentes que puede usar con esta propiedad: la sintaxis de palabra clave ("auto", "cover" y "contain"), la sintaxis de un valor (establece el ancho de la imagen (la altura se convierte en "auto"), la sintaxis de dos valores (primer valor: ancho de la imagen, segundo valor: alto) y la sintaxis de fondo múltiple (separados por coma).
| Valor por defecto: | auto |
|---|---|
| Heredado: | No |
| Animable: | si. Leer sobre animable |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | objeto .style.backgroundSize="60px 120px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Sintaxis CSS
background-size: auto|length|cover|contain|initial|inherit;
Valores de propiedad
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Especifique el tamaño de una imagen de fondo con un porcentaje:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Ejemplo
Especifique el tamaño de una imagen de fondo con "portada":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Ejemplo
Especifique el tamaño de una imagen de fondo con "contener":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Ejemplo
Aquí tenemos dos imágenes de fondo. Especificamos el tamaño de la primera imagen de fondo con "contain", y la segunda imagen de fondo con "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Ejemplo
Use diferentes propiedades de fondo para crear una imagen de "héroe":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
páginas relacionadas
Tutorial CSS: Fondos CSS
Referencia HTML DOM: propiedad backgroundSize