La propiedad de tamaño de fondo en CSS se usa para establecer el tamaño de la imagen de fondo. La imagen puede colocarse a la izquierda de su tamaño natural, estirarse o restringirse para que quepa en el espacio disponible.
Sintaxis:
background-size: auto|length|cover|contain|initial|inherit;
La propiedad background-size se puede especificar con una de las siguientes sintaxis:
- Usar el valor de la palabra clave como ‘ auto ‘, ‘ cover ‘ y ‘ contain ‘.
- Usando la sintaxis de un solo valor, es decir, establecer la propiedad de ancho donde la propiedad de altura se establece en el valor predeterminado como automático .
- Usando la sintaxis de doble valor que tiene tanto la propiedad de ancho como la de alto, donde el primer valor establece el ancho de la imagen y el segundo valor establece el alto de la imagen. Cada valor puede ser en porcentaje, píxeles o automático.
- Para especificar el tamaño de las múltiples imágenes de fondo, use la coma para separar cada valor.
Valor por defecto: Su valor por defecto es automático.
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
auto: se utiliza para establecer la propiedad de tamaño de fondo en su valor predeterminado. Se utiliza para mostrar la imagen de fondo a su tamaño original.
Sintaxis:
background-size: auto;
Ejemplo: este ejemplo ilustra el uso de la propiedad background-size cuyo valor se establece en automático.
HTML
<!DOCTYPE html>
<html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: auto;</h2>
</body>
</html>
Producción:
longitud: se utiliza para establecer el ancho y la altura de la imagen de fondo. El primer valor indica el ancho y el segundo valor indica la altura de la imagen de fondo en términos de px, pt, em, etc. Si no se proporciona ningún valor, se establece en automático.
Sintaxis:
background-size: length;
Ejemplo: este ejemplo ilustra el uso de la propiedad background-size cuyo valor se establece en un valor de longitud específico.
HTML
<!DOCTYPE html>
<html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-size: 400px 450px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: length;</h2>
</body>
</html>
Producción:
porcentaje: se utiliza para establecer el ancho y la altura en términos de porcentaje en relación con el elemento principal. El primer valor indica el ancho y el segundo valor indica la altura de la imagen de fondo. Si no se proporciona ningún valor, se establece en automático.
Sintaxis:
background-size: percentage;
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-size cuyo valor se especifica en porcentaje.
HTML
<!DOCTYPE html>
<html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-size: 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: percentage (%);</h2>
</body>
</html>
Producción:
cover: Se utiliza para cambiar el tamaño de la imagen de fondo para cubrir todo un elemento contenedor.
Sintaxis:
background-size: cover;
Ejemplo: Este ejemplo ilustra el uso de la propiedad background-size cuyo valor se establece en cover.
HTML
<!DOCTYPE html>
<html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: cover;</h2>
</body>
</html>
Producción:
- initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado.
- heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
Navegadores compatibles: los navegadores compatibles con la propiedad de tamaño de fondo se enumeran a continuación:
- Google Chrome 3 y superior
- Internet Explorer 9.0 y superior
- Microsoft Edge 12.0 y superior
- Firefox 4.0 y superior
- Ópera 10 y superior
- Safari 5 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA