Configuración del GIF “ formato de gráficos intercambeable ” como imagen de fondo agrega un elemento visualmente atractivo al diseño. GIF permite a los desarrolladores transmitir información o resaltar un producto o servicio que ayuda a crear la identidad visual de una marca. Sin embargo, los desarrolladores deben asegurarse de que el uso de GIF no abrume la página web ni distraiga al usuario del contenido principal.
Este artículo demuestra el procedimiento de configuración de un GIF como imagen de fondo en la página web.
¿Cómo establecer GIF como imagen de fondo en la página web?
Establecer un GIF como imagen de fondo ayuda a crear elementos llamativos al agregar elementos visuales.
Los GIF son particularmente útiles en sitios web que desean transmitir una sensación de diversión o fantasía, o en páginas que desean resaltar un producto o característica en particular. Para configurarlo, como imagen de fondo visita los siguientes ejemplos:
Ejemplo 1: configuración de GIF como fondo fijo
Como los elementos HTML que ayudan a construir el contenido de la página web se colocan dentro del '
Por ejemplo, el “ ' y ' Las etiquetas ” se utilizan como contenido de la página web. Vea el siguiente fragmento de código:
< cuerpo >
< h1 > Configuración de GIF como una imagen de fondo en la página h1 >
< pag > Este GIF ha sido agregado como una imagen de fondo en toda la página usando 'imagen de fondo' Propiedad. Este artículo ha sido impulsado por Linuxhint. pag >
cuerpo >
Ahora, seleccione el elemento HTML 'cuerpo' dentro del '
imagen de fondo: url ( 'sea.gif' ) ;
repetición de fondo: sin repetición;
tamaño de fondo: portada;
relleno: 50px;
tamaño de fuente: x-grande;
color blanco;
}
En el bloque de código anterior:
-
- Primero el ' URL() se utiliza el método ” que almacena la ruta del “ GIF ' archivo. Y este método se pasa como valor al CSS” imagen de fondo ' propiedad.
- A continuación, establezca “ no-repeat 'como un valor para el CSS' repetición de fondo ” propiedad para la repetición del archivo GIF.
- Luego, establezca el valor de “ cubrir ” al CSS “ tamaño de fondo ” propiedad para cubrir todo el espacio disponible
- Después de eso, proporcione el valor de “ 50px ' y ' extra grande ” al CSS “ relleno ' y ' tamaño de fuente ” propiedades, respectivamente. Esto agrega espacio alrededor del texto y aumenta el tamaño de la fuente.
Después de la compilación, la página web se ve así:
El resultado anterior muestra que se ha agregado un gif como fondo en la página web.
Ejemplo 2: configuración de GIF como fondo desplazable
Inicialmente, cree una estructura HTML para hacer un contenido de página web como este:
< división clase = 'contener' >< h1 > Configuración de GIF como una imagen de fondo en la página h1 >
< pag > Este GIF ha sido agregado como una imagen de fondo en toda la página usando el 'imagen de fondo' Propiedad. Este artículo ha sido impulsado por Linuxhint. pag >
división >
< división >
< h3 estilo = 'color blanco;' > Contenido escrito fuera del 'div' elemento h3 >
división >
En el código anterior:
-
- Primero, el padre” La etiqueta ” se utiliza con una clase de “ contener ”.
- A continuación, utilice “ h1 ' y ' pag ” Elementos HTML y proporcionarles contenido ficticio.
- Después de eso, crea otro “
” y utilizar el “ ” al proporcionarle datos ficticios.Ahora, agregue GIF como fondo en la página web insertando las siguientes propiedades CSS:
.conta {
imagen de fondo: url ( sea.gif ');
repetición de fondo: sin repetición;
tamaño de fondo: portada;
altura: 100vh;
pantalla: flexible;
alinear elementos: centro;
justificar-contenido: centro;
dirección de flexión: columna;
color blanco;
tamaño de fuente: grande;
alineación de texto: centro;
relleno: 2 rem;
}
La descripción del bloque de código utilizado anteriormente:-
- Primero, establezca el “ ruta de la imagen ”, “ no-repea t” y “ cubrir 'como un valor para el CSS' imagen de fondo ”, “ repetición de fondo ' y ' tamaño de fondo ” propiedades, respectivamente.
- A continuación, establezca el valor de “ 100vh ' y ' doblar ” al CSS “ altura ' y ' mostrar ' propiedades.
- Después de eso, utilice el CSS “ color ”, “ tamaño de fuente ”, “ texto alineado ' y ' relleno ” propiedades para aplicar estilo al contenido.
Después del final del proceso de compilación, la página web se ve así:
La salida muestra que el ' GIF ” se ha insertado como imagen de fondo en toda la página.Conclusión
Para establecer GIF como imagen de fondo en la página web, el CSS “ imagen de fondo 'La propiedad se utiliza en el HTML' cuerpo ' elemento. La propiedad CSS que se aplica al elemento 'cuerpo' se aplica automáticamente a todos los elementos que lo contienen. Al establecer el “ 100vh ” como valor para la propiedad de altura, también se puede habilitar el efecto de desplazamiento. Permite que el gif de fondo se mueva a lo largo del desplazamiento. Este artículo ha demostrado cómo configurar un GIF como imagen de fondo en la página web.
- Primero, el padre”