Hoy en día, hay una gran demanda de sitios web con imágenes de fondo responsivas. Los sitios web responsivos brindan a los usuarios una experiencia de usuario ideal en casi todos los dispositivos, incluidos móviles, tabletas o computadoras de escritorio. Las imágenes responsivas pueden adaptar el fondo del sitio web, el tamaño de la pantalla y las dimensiones. Las imágenes responsivas garantizan que se mantengan la calidad y la proporción. Además, el sitio web con imágenes de fondo responsivas se carga rápidamente.
Esta guía proporcionará instrucciones para adaptar las imágenes de fondo a las dimensiones de la pantalla.
¿Cómo adaptar las imágenes de fondo a las dimensiones de la pantalla?
La imagen puede adaptarse a las dimensiones de la pantalla siguiendo las instrucciones paso a paso que se detallan a continuación.
Paso 1: crear una estructura HTML
Primero, cree una estructura HTML y agregue la hoja de estilo externa usando el
< HTML >
< cabeza >
< enlace rel = 'hoja de estilo' href= 'estilo.css' >
< título > Imagen de fondo responsiva título >
cabeza >
< cuerpo >
--Área para agregar el otro contenido-- >
cuerpo >
HTML >
Paso 2: aplicar CSS
Ahora, aplica el CSS al ' cuerpo ' sección. Primero, especifique la imagen de fondo. Para ello utilice el “ imagen de fondo ' y especifique el ' URL() ”Valor que contiene la dirección del archivo de imagen.
Después de eso, use el botón ' imagen de fondo ”para especificar el tamaño de la imagen, el “ repetición de fondo ' propiedad para establecer la repetición de la imagen, y ' archivo adjunto de fondo ”para establecer si la imagen se desplaza con el resto de la página o no. Por último, configure el ' margen ' y ' relleno ' a ' 0 ”:
cuerpo {imagen de fondo: URL ( 'imagen-de-prueba.jpg' ) ;
tamaño de fondo: 100 % 100 % ;
/* Escalar la imagen a 100 % ancho y 100 % altura */
repetición de fondo: no repetición;
adjunto de fondo: fijo;
margen: 0 ;
relleno: 0 ;
/* Opcional: fondo fijo */
}
Producción
Este es el resultado antes de contraer la ventana del navegador:
Después de la contracción del navegador:
El resultado anterior confirma que la imagen ha adaptado el fondo a las dimensiones de la pantalla.
Conclusión
Para adaptar las imágenes de fondo a las dimensiones de la pantalla, primero incluya el ' ventana gráfica ”en la sección de la cabeza para controlar las dimensiones y la escala. Luego, crea una estructura HTML y aplica CSS. En CSS, establezca el ' tamaño de fondo ” valor de la propiedad al “ cubrir 'Valor para escalar la altura y el ancho de una imagen. Este artículo ha presentado una guía completa para adaptar imágenes de fondo a las dimensiones de la pantalla.