El propósito de este artículo es establecer una imagen de fondo completa receptiva usando CSS.
Para configurar una imagen de fondo completa receptiva usando CSS, usaremos la propiedad de tamaño de fondo de CSS que tiene un valor automático que le dice a los navegadores que escalen automáticamente el ancho y la altura de la imagen según el contenedor, para centrar el elemento. Y para dispositivos de tamaño pequeño, agregaremos consultas de medios que reducen el tamaño del archivo de imagen para que se cargue rápidamente.
Sintaxis:
background-size: auto;
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
body {
/* Add image */
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210324142236/gfg_complete_logo_2x-min1.png");
/* Make image center */
background-position: center center;
/* Make image fixed */
background-attachment: fixed;
/* Not repeat images */
background-repeat: no-repeat;
/* Set background size auto */
background-size: auto;
}
/* Media query for mobile devices */
@media only screen and (max-width: 767px) {
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210324142236/gfg_complete_logo_2x-min1.png");
}
}
</style>
</head>
<body>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA