Fondos paginas web html

Cómo insertar una imagen de fondo en html desde una carpeta local

Los bordes del elemento se dibujan encima de ellos, y el color de fondo se dibuja debajo de ellos. Cómo se dibujan las imágenes en relación con la caja y sus bordes se define mediante las propiedades CSS background-clip y background-origin.

Nota: Aunque las imágenes sean opacas y el color no se muestre en circunstancias normales, los desarrolladores web deben especificar siempre un color de fondo. Si las imágenes no pueden cargarse -por ejemplo, cuando la red no funciona-, se utilizará el color de fondo como alternativa.

Problemas de accesibilidadLos navegadores no proporcionan ninguna información especial sobre las imágenes de fondo a la tecnología de asistencia. Esto es importante sobre todo para los lectores de pantalla, ya que un lector de pantalla no anunciará su presencia y, por tanto, no transmitirá nada a sus usuarios. Si la imagen contiene información crítica para entender el propósito general de la página, es mejor describirla semánticamente en el documento.

Color de fondo html

Cuando se navega por Internet, a menudo se encuentran sitios web con fondos de colores, representados por una animación, un gráfico, un fondo de pantalla de color liso o incluso una imagen completa. El establecimiento de un estilo de fondo para los sitios web se realiza con la ayuda del atributo background típico de los elementos HTML.

Utilizando el atributo background en el código HTML de tus páginas, puedes conseguir efectos de color realmente atractivos para tu presencia en la web. Puedes utilizar ese atributo de dos formas básicas: a través de las Hojas de Estilo en Cascada (CSS) o estableciendo las propiedades de fondo en los elementos HTML directamente. Mientras que el método CSS es ampliamente utilizado y preferido por un número creciente de diseñadores, establecer fondos para sus páginas web a través de HTML se considera una técnica obsoleta con muchas inflexibilidades.

Aplicar un estilo de fondo a tus páginas a través de CSS es increíblemente flexible. Puedes definir un atributo de fondo a cualquier elemento HTML, desde una celda de una tabla hasta una página entera de tu sitio. El atributo tiene muchas variaciones según la propiedad de fondo que quieras definir:

Imagen de fondo html

¿Ha oído alguna vez que la gente sólo recuerda el 20% de lo que lee, pero el 80% de lo que ve? Aunque los porcentajes exactos son objeto de debate, la idea básica no lo es: a la gente le resulta fácil aprender y procesar la información de forma visual.

Por eso la mayoría de los sitios web utilizan imágenes, y por eso es importante incluir imágenes en su propio sitio. Las imágenes ayudan a que su contenido sea más informativo, atractivo y memorable. Además de mejorar la experiencia del visitante, también pueden ayudar a aumentar el tráfico de búsqueda orgánica.

Si utiliza una plataforma de creación de sitios web como CMS Hub o WordPress, sólo tiene que hacer clic en el icono de la imagen en su barra de herramientas, seleccionar una imagen de su gestor de archivos e insertarla. Si no utilizas un constructor, puedes añadir fácilmente imágenes a tu sitio web. Sólo necesitas saber algo de HTML. Veamos el proceso a continuación.

El elemento HTML imagen es un “elemento vacío”, lo que significa que no tiene una etiqueta de cierre. A diferencia de los elementos como el párrafo, que consisten en una etiqueta de apertura y otra de cierre con contenido en medio, una imagen especifica su contenido con atributos en la etiqueta de apertura.

Css background-image

La propiedad CSS background-size puede tener el valor de cover. El valor cover indica al navegador que debe escalar automáticamente y de forma proporcional la anchura y la altura de la imagen de fondo para que sean siempre iguales o mayores que la anchura/altura de la ventana gráfica.

La imagen que he utilizado en la demo es de unos 5500x3600px. Esta dimensión nos cubrirá en la mayoría de los monitores de ordenador de pantalla ancha que se venden actualmente en el mercado, pero a costa de servir un archivo de 1,7MB.

Esa enorme carga útil sólo para una foto de fondo nunca es buena en ningún tipo de situación, pero es excepcionalmente mala en las conexiones móviles a Internet. Además, la dimensión de la imagen es excesiva en los dispositivos de pantalla pequeña (más adelante en este tutorial).

Sin embargo, esta técnica también funciona en cualquier elemento a nivel de bloque (como un div o un formulario). Si la anchura y la altura de su contenedor a nivel de bloque es fluida, entonces la imagen de fondo siempre se escalará para cubrir el contenedor por completo.

Ahí es donde ocurre la magia. Este par propiedad/valor le dice al navegador que escale la imagen de fondo proporcionalmente para que su anchura y altura sean iguales o mayores que la anchura/altura del elemento. (En nuestro caso, es el elemento body).