Al crear un sitio web o escribir una publicación de blog, las imágenes juegan un papel vital en hacer que las cosas sean más atractivas y comprensibles. Sin imágenes, ya sea un blog o un sitio web, se vuelve aburrido y los lectores comienzan a perder interés. Las imágenes de fondo también tienen un impacto pragmático en la interactividad de la página web.

Este artículo proporciona una guía detallada para agregar una imagen de fondo en HTML. Además, este artículo tiene los siguientes resultados con respecto a:

• Cómo agregar una imagen de fondo en HTML
• Cómo agregar una imagen de fondo a una etiqueta en HTML
• Cómo agregar una imagen de fondo de la página web en HTML
• Cómo evitar la repetición de la imagen de fondo
• Cómo cubrir todo el fondo sin repetición
• Cómo estirar la imagen de fondo en HTML

Cómo agregar una imagen de fondo en HTML

En HTML, podemos agregar una imagen de fondo utilizando la propiedad de la propiedad CSS. Una imagen de fondo se usa como papel tapiz en un sitio web o como imagen de portada para un control deslizante. La sintaxis de la propiedad de "imagen de fondo" se escribe a continuación:

Background-Image: URL ('Nombre de la imagen');

La sintaxis anterior es una propiedad CSS y se puede usar en una hoja de estilo externo, CSS interno o CSS en línea.

Ejemplo

Para una mejor comprensión, se practica el siguiente código HTML para agregar una imagen de fondo en HTML.

Esta es una imagen

En este ejemplo, utilizamos la propiedad de imagen de fondo en el

Etiqueta para agregar una imagen de fondo.

Producción

La salida muestra que en HTML se puede agregar una imagen de fondo utilizando la propiedad CSS.

Cómo agregar una imagen de fondo a una etiqueta en HTML

También podemos agregar una imagen de fondo en un párrafo utilizando CSS interno, en línea o externo. Podemos usar la imagen de fondo en un párrafo para crear diferentes diseños.

Ejemplo

Antecedentes de párrafo

Este párrafo está escrito para demostrar el uso de la imagen de fondo con el párrafo.
Este párrafo está escrito para demostrar el uso de la imagen de fondo con el párrafo. Este párrafo está escrito para demostrar el uso de la imagen de fondo con el párrafo.
Este párrafo está escrito para demostrar el uso de la imagen de fondo con el párrafo. Este párrafo está escrito para demostrar el uso de la imagen de fondo con el párrafo.

En este ejemplo usamos una imagen de fondo para cambiar el fondo del párrafo.

Producción

La salida muestra que agregamos una imagen de fondo a un párrafo utilizando la propiedad de imagen de fondo.

Cómo agregar una imagen de fondo de la página web en HTML

Por lo general, el fondo de una página web es blanco, pero también podemos cambiar el fondo de una página web utilizando la propiedad de imagen de fondo a la etiqueta de HTML. imagen de fondo.

Ejemplo

Fondo del cuerpo

Al crear un sitio web o escribir una publicación de blog, las imágenes juegan un papel vital en hacer que las cosas sean más atractivas y comprensibles. Sin imágenes, ya sea un blog o un sitio web, se vuelve aburrido y los lectores comienzan a perder interés.

En este ejemplo, cambiamos el fondo de una página web agregando una imagen de fondo a htmlbody.

Producción

Esta salida muestra que la propiedad de imagen de fondo ha establecido la imagen en toda la página.

Cómo evitar la repetición de la imagen de fondo

Cuando agregamos antecedentes en una página web, la imagen se repita para cubrir toda la página como se muestra a continuación:

Entonces, para evitar la repetición de la imagen, utilizamos la propiedad CSS repetición y establecer su valor en sin repetición Como se muestra en la siguiente salida:

Ejemplo

En este ejemplo, eliminamos la repetición de la imagen con la ayuda de la propiedad CSS de repetición de fondo.

Producción

La salida muestra que después de usar Background-Repeat: sin repetición; Las imágenes de la propiedad llegan a su tamaño original y deje el resto de la página vacía.

Cómo cubrir todo el fondo sin repetición

El tamaño de fondo y atacamiento de antecedentes Las propiedades se pueden usar para establecer una imagen en todo el fondo. Para hacerlo, necesitas usar el cubrir y fijado valores de tamaño de fondo y atacamiento de antecedentes propiedades.

Ejemplo

En este ejemplo hemos usado el tamaño de fondo: cubierta Para agregar una imagen de fondo a toda la página web sin repetición. Y el Atacamiento de fondo: fijo La propiedad elimina el efecto de desplazamiento.

Producción

La salida anterior muestra que la propiedad de tamaño de fondo cubre toda la página web, pero sigue siendo desplazable, por lo que para eliminar el efecto de desplazamiento, utilizamos la propiedad de unión de fondo.

Cómo estirar la imagen de fondo en HTML

Puede estirar la imagen de fondo para evitar la repetición de una imagen. Para hacerlo, el tamaño de fondo y atacamiento de antecedentes Propiedades CSS.

Ejemplo

En este ejemplo hemos usado el tamaño de fondo: 100% 100%. Los primeros 100 se refieren al ancho y al segundo 100 identifica la altura que finalmente estira la imagen. Mientras Atacamiento de fondo: fijo

Producción

La salida anterior muestra la propiedad de tamaño de fondo para estirar la imagen, pero sigue siendo desplazable, por lo que para eliminar el efecto de desplazamiento utilizamos la propiedad de alcance de fondo.

Conclusión

En html, imagen de fondo La propiedad se usa para agregar una imagen de fondo . Este artículo tiene como objetivo agregar una imagen de fondo en HTML. La imagen de fondo se puede agregar a un solo elemento HTML o a toda la página web. Del mismo modo, la imagen de fondo se puede personalizar utilizando varias propiedades de CSS, como el tamaño de fondo, el alcance de fondo o las propiedades de repetición de fondo. También hemos proporcionado una idea del uso de estas propiedades para manipular la imagen de fondo. imagen de fondo.