Stretch Background Image CSS?
Este tutorial demostrará cómo estirar las imágenes de fondo con CSS.
Cómo estirar la imagen de fondo con CSS?
Para estirar la imagen de fondo con CSS, pruebe las instrucciones dadas.
Paso 1: Crea el primer contenedor Div
Primero, agregue un "div"Contenedor utilizando el""Etiqueta y asigna un"identificación"Atributo dentro del contenedor.
Paso 2: Agregar encabezado
Agregue un encabezado usando el ""Etiqueta en el documento HTML. El "
"La etiqueta se usa para incrustar el encabezado de nivel uno.
Paso 3: Haga un recipiente de segundo Div
A continuación, crea otro ""Contenedor junto con el"clase"Atributo, agregue una etiqueta de encabezado""E inscribir el encabezado. Después de eso, agregue otro "" siguiendo el mismo procedimiento:
tamaño de fondo: portada:
tamaño de fondo: 100% auto:
Paso 4: Estilo Primer contenedor Clase
Aquí, acceda al elemento "" que tiene clase "IMG-1" con la ayuda de ".Selector y aplique las siguientes propiedades de CSS:
borde: 3px sólido RGB (240, 12, 12);
Ancho: 500px;
Altura: 200px;
Antecedentes: URL (emoji.png);
tamaño de fondo: cubierta;
Aquí:
- El "bordeLa propiedad establece un límite alrededor del elemento.
- "ancho"Define el tamaño del elemento horizontalmente.
- "altura"Especifica el tamaño del elemento verticalmente.
- "fondo"Se utiliza para asignar el color de fondo del elemento.
- "tamaño de fondo"Propiedad con el"cubrirEl valor se usa como el tamaño de fondo que escala la imagen para llenar el contenedor:
Paso 5: Segunda clase de contenedores de estilo
Acceda al segundo contenedor Div utilizando el nombre de la clase ".IMG-2”Y aplique las propiedades listadas dadas:
borde: 3px sólido RGB (226, 17, 17);
Ancho: 500px;/ * ancho de pantalla */
Altura: 200px;/ * Altura de pantalla */
Antecedentes: URL (emoji.png);
Background-Repeat: sin repetición;
tamaño de fondo: 100% automático;
En el bloque de código anterior:
- El "repeticiónSe utiliza la propiedad para repetir la imagen a lo largo de los ejes horizontales y verticales. Aquí, el valor se establece como "sin repetición"Por no repetir la imagen.
- Entonces el "tamaño de fondo"Está configurado como"100% Auto".
Producción
Se puede notar que hemos estirado con éxito la imagen de fondo usando CSS.
Conclusión
Para estirar la imagen de fondo, primero, utilice el "fondo"Propiedad para establecer la imagen de fondo para un elemento junto con el valor como"url". Luego, use la propiedad CSS "tamaño de fondo" como "cubrir" o "100% Auto"Para estirar la imagen. Esta publicación te ha enseñado cómo CSS estira la imagen de fondo.