Como poner una imagen de fondo en html

Aprende a como poner una imagen de fondo en html de una p√°gina aplicando un bgcolor (o, m√°s correctamente, usando CSS y el atributo de estilo). En esta lecci√≥n veremos c√≥mo personalizar a√ļn m√°s el fondo de la p√°gina aplicando una imagen de fondo en lugar de un color de relleno simple.

Este no es el lugar para hacer disertaciones de dise√Īo web, sin embargo, es aconsejable advertir al lector que el uso¬†de im√°genes de fondo en las p√°ginas web¬†es una soluci√≥n est√©tica que debe usarse con precauci√≥n y sentido com√ļn y nunca debe comprometer la usabilidad y legibilidad del contenido.

Habiendo hecho esta premisa necesaria, veamos cuál es el marcado para insertar o como poner una imagen de fondo en html y en documento HTML. Para ello, una vez más, debemos actuar a través de un atributo especial de la etiqueta <body>: el atributo background .

√ćndice

    Aquí hay un ejemplo de como poner una imagen de fondo en html:

    Como poner una imagen de fondo en html

    <body background="sfondo.jpg">

    Como ya ha entendido, el valor del atributo background corresponde a la ruta de la imagen que queremos usar como fondo de nuestra página web (en el ejemplo, la imagen está en la misma carpeta que nuestro documento HTML).

    Es importante especificar que la imagen de fondo insertada de esta forma se repetirá tanto horizontal como verticalmente hasta cubrir toda la superficie de la página mostrada en el navegador. Veamos un ejemplo:

    Para un resultado estético óptimo, por tanto, es recomendable utilizar imágenes modulares capaces de repetirse indefinidamente (un poco como azulejos decorados cuyos patrones geométricos se repiten continuamente). Veamos un ejemplo:

    Es importante especificar (como ya vimos en la primera lección dedicada a la etiqueta <body>) que el uso del atributo background no excluye el uso de bgcolor visto en la lección anterior: usando ambos atributos el color de fondo se mostrará hasta que la imagen de fondo se cargue por completo desde el navegador.

    <body bgcolor="#FF0000" background="/img/sfondo.jpg">

    Aplicar una imagen de fondo usando CSS

    Al igual que bgcolor , el uso del atributo de fondo también está en desuso en HTML 5. Una vez más, por lo tanto, la solución ideal para aplicar como poner una imagen de fondo en html a una página web es usar CSS.

    El uso de hojas de estilo no solo le permite cumplir con las especificaciones del W3C, sino también tener más control sobre la apariencia de la imagen de fondo, como se explica en esta página de la guía CSS.

    Encantado de reproducir el efecto del atributo de fondo , el código a utilizar será este:

    <body style="background-image: url(/img/sfondo.jpg)"

    Si queremos asignar tanto un color de fondo como una imagen, en su lugar, usaremos este código:

    <body style="background-color: #FF0000; background-image: url(/img/sfondo.jpg)"

    <body style="background: #FF0000 url(/img/sfondo.jpg)"

    No es necesario dar más explicaciones sobre la sintaxis CSS más allá del alcance de esta guía en como poner una imagen de fondo en html.

    ¬ŅLo encontraste interesante?

    Comp√°rtelo a nuestro bolet√≠n de como poner una imagen de fondo en html en redes sociales y obtenga las √ļltimas actualizaciones de seiho en linea.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Cookies Leer mas