En HTML, las imágenes de fondo se utilizan para diseñar y mejorar el aspecto de las páginas web. Por defecto, las imágenes de la página web se muestran en la esquina superior izquierda de la pantalla. Sin embargo, puede cambiar el tamaño de la imagen en modo de pantalla completa. CSS proporciona "posición de fondo" y "tamaño de fondo"Propiedades que se pueden usar para forzar una imagen para que se muestre en toda la pantalla.

En este manual, aprenderá el método de agregar una imagen de fondo en modo de pantalla completa.

Empecemos!

Cómo hacer una imagen de fondo de pantalla completa usando CSS?

Para hacer el fondo de pantalla completa con CSS, primero, cree un DIV y ajuste su ancho y altura, y margen para que aparezca en la pantalla completa utilizando el "ancho","altura", y "margen"Propiedades de CSS. Luego, agregue un borde a su alrededor usando el "borde" propiedad. Para establecer el borde de acuerdo con la pantalla, use el "dimensionador" propiedad. Una vez hecho, utilizaremos la propiedad de "fondo"Para agregar la imagen en el fondo.

La sintaxis de la propiedad de fondo es:

Antecedentes: imagen de fondo (URL) Repatación de fondo Posición de fondo/ tamaño de fondo

En la sintaxis de mención anterior, se mencionan las siguientes cuatro propiedades de la propiedad de fondo:

• imagen de fondo: Se utiliza para agregar una imagen como fondo.
• Repread de fondo: Se usa para establecer el patrón de repetición de la imagen de fondo, como sin repetición, repetir horizontalmente y repetir verticalmente.
• Posición de fondo: Se usa para ajustar la posición de la imagen, como el centro, la izquierda y la derecha.
• tamaño de fondo: Se usa para establecer el tamaño de la imagen, como Auto, Cubierta y Longitud.

Pasemos al ejemplo en el que haremos una imagen de fondo de pantalla completa usando CSS.

Ejemplo

En el HTML, crearemos un contenedor y estableceremos su nombre de clase como "div"Y agregue el encabezado con el

etiqueta. Además, para colocar el encabezado en el centro de la página, usaremos la etiqueta.

Html

Bienvenido a Linuxhint

Luego, asigne el valor de la propiedad de margen como "0"Y la altura como"100px"Para todo el cuerpo del HTML.

CSS

html, cuerpo
margen: 0;
Altura: 100%;

En el siguiente paso, diseñe el contenedor creado usando "div"Y ajuste el ancho y la altura del Div como"100px". Usaremos la propiedad fronteriza para agregar el borde alrededor del div "con"25px"Ancho, estilo como"ranura"Y el color de la frontera como"RGB (184, 147, 147)":

div
Ancho: 100%;
Altura: 100%;
borde: 25px Groove RGB (184, 147, 147);

El resultado del código mencionado anteriormente se da a continuación. Puedes ver que se crean el encabezado y el borde:

Nota: Como puede ver, en el borde de la imagen proporcionado anteriormente desde la derecha e inferior está oculto, esto se debe a que el ancho y la altura del DIV ya están "100%", Entonces, cuando agregamos un borde, se agregarán ancho y altura adicionales. Para evitar esto, usaremos el "dimensionador"Propiedad de CSS, ya que nos permite incluir un borde en el ancho y la altura del elemento.

Para hacerlo, estableceremos el valor del tamaño de la caja como "caja de fronteras"Para incluir el borde dentro del ancho total y la altura del Div:

dimensionamiento de la caja: border-box;

La imagen dada a continuación indica que el borde se coloca con éxito dentro del ancho y la altura del DIV:

Ahora, agregaremos la imagen de fondo utilizando el "imagen de fondo"Propiedad y especifique la URL de la imagen en ella como"URL (imagen.JPG)":

div
Antecedentes: URL ("Imagen.jpg ");

En la imagen proporcionada a continuación, puede ver que la imagen de fondo se agrega con éxito, pero es repetitiva:

Para evitar la repetición de la imagen, el "repeticiónSe utiliza la propiedad. Aquí, estableceremos el valor de la repetición de fondo como "sin repetición":

div
IMAGEN DE ACTUALO: URL ("Imagen.jpg ");
Background-Repeat: sin repetición;

En la salida proporcionada a continuación, puede ver que se detiene la repetición de la imagen; Sin embargo, la imagen no se muestra en la pantalla:

Para mostrar la imagen en pantalla completa, utilizaremos el "tamaño de fondo" propiedad. Y establecer su valor como "cubrir", Lo que significa que la imagen cubrirá toda el área del contenedor creado:

div
IMAGEN DE ACTUALO: URL ("Imagen.jpg ");
Background-Repeat: sin repetición;
tamaño de fondo: cubierta;

La imagen a continuación indica que la imagen se muestra en la pantalla completa y se corta. Esto se debe a que el tamaño de la imagen es mayor que el tamaño Div:

Para solucionar este problema, use el "posición de fondo"Propiedad y establecer la posición de la imagen como"centro":

div
IMAGEN DE ACTUALO: URL ("Imagen.jpg ");
Background-Repeat: sin repetición;
tamaño de fondo: cubierta;
Posición de fondo: centro;

Como resultado, la imagen seleccionada se mostrará en modo de pantalla completa:

Eso es todo! Hemos explicado el método para hacer una imagen de fondo de pantalla completa usando CSS.

Conclusión

Para crear una imagen de fondo de pantalla completa con CSS, primero, cree un DIV y establezca el ancho, la altura y los márgenes para llenar la pantalla. Después de eso, cree un borde alrededor del div, luego agregue una imagen usando el "imagen de fondo" propiedad. Para ajustar la imagen de acuerdo con la pantalla completa, use el "repetición","tamaño de fondo", y "posición de fondo" propiedades. Este artículo ha explicado el método completo para hacer la imagen de fondo de pantalla completa usando CSS.