HDTutorial
ES
Cómo agregar una imagen de fondo en HTML

La reproducción carga el reproductor integrado de YouTube (modo de privacidad mejorada).

Cómo agregar una imagen de fondo en HTML

580.078 visualizaciones 25 de octubre de 2016 4:36

Ver en YouTube
CanalCode Grammar

Capítulos

Descripción del autor

En este tutorial de HTML, aprenderás a añadir imágenes de fondo a una página web usando CSS. Verás cómo establecer colores, insertar imágenes, controlar su repetición y ajustar su tamaño para que cubran toda la ventana del navegador.

Este tutorial de CSS incluye:
Añadir colores de fondo con CSS en línea
Usar [background-image: url()] con una imagen de internet
Controlar la repetición con [no-repeat]
Escalar imágenes con [background-size] (100%, 75%, etc.)
Estirar la imagen para que cubra ancho y alto
Pasar el CSS de los atributos [style] en línea a la etiqueta [style] para un código más limpio

Este tutorial es ideal para principiantes y muestra paso a paso cómo hacer que el fondo de tu página web luzca profesional con imágenes en lugar de colores simples.

⏱️ Marcadores de tiempo

00:00 – Introducción: añadir fondos en HTML
00:21 – Dos formas: etiqueta style vs atributo style en línea
00:30 – Añadir color de fondo (negro, amarillo, etc.)
01:01 – Usar [background-image: url()] con imágenes externas
01:19 – Ejemplo con fondo en mosaico
01:43 – Usar [no-repeat] para mostrar una sola imagen
02:12 – Estirar el fondo con [background-size: 100%]
02:41 – Escalar X e Y de forma independiente (100% 100%, 75%, etc.)
03:26 – Mejor práctica: mover el CSS de los estilos en línea a la etiqueta [style]
04:00 – Código organizado vs cambios rápidos en línea
04:26 – Resumen y conclusión

🏷️ Etiquetas
Tutorial HTML, imagen de fondo HTML, tutorial imagen de fondo CSS, añadir imagen de fondo HTML, fondos CSS HTML, background-size cover, background no-repeat, tutorial HTML para principiantes, tutorial CSS para principiantes, fondo de página…

Sobre este tutorial

Code Grammar publicó este tutorial en vídeo de 4:36 el 25 de octubre de 2016. Se ha visto 580.078 veces en YouTube.

Categoría
Educación
Duración
4:36
Publicado
25 de octubre de 2016
Visualizaciones
580.078
Me gusta
3.501

Compartir

Para saber más

  • Fondos de imagen en HTML - Home de DesarrolloWeb.com desarrolloweb.com

    En el presente taller de HTML vamos a tratar de explicar asuntos relativos al uso de fondos de imagen en HTML. Indicaremos la manera de utilizarlos correctamente, pues los fondos son capaces de lo peor y de lo mejor, es…

  • Como poner una imagen de fondo en HTML codigonaranja.com

    Podemos colocar una imagen de fondo sobre cualquier elemento HTML, como la página completa, una caja de texto, una sección, etc. Ahora vamos a agregar la imagen de fondo sobre una sección de la página, como se ve en est…

  • Ejemplo de Cómo poner imagen de fondo en HTML ejemplode.com

    Ejemplo de Cómo poner imagen de fondo en HTML. Para poner una imagen de fondo con HTML es necesario agregar el atributo background al tag y hacer referencia a

Este tutorial en otros idiomas