Como adicionar uma imagem de fundo em HTML

Neste tutorial de HTML, vamos aprender a adicionar imagens de fundo a uma página web usando CSS. Você vai ver como definir cores, inserir imagens, controlar a repetição e ajustar o tamanho para que a imagem preencha toda a janela do navegador.

Este tutorial de CSS aborda:
Adicionar cores de fundo com CSS inline
Usar [background-image: url()] com uma imagem da web
Controlar a repetição com [no-repeat]
Redimensionar imagens com [background-size] (100%, 75%, etc.)
Esticar a imagem para cobrir largura e altura
Mover o CSS dos atributos [style] inline para a tag [style] para um código mais limpo

Este tutorial é perfeito para iniciantes e mostra passo a passo como deixar o fundo da sua página web profissional com imagens, e não apenas cores sólidas.

⏱️ Marcadores de tempo

00:00 – Introdução: adicionando fundos em HTML
00:21 – Duas formas: tag style vs atributo style inline
00:30 – Adicionando cor de fundo (preto, amarelo, etc.)
01:01 – Usando [background-image: url()] com imagens externas
01:19 – Exemplo com fundo em mosaico
01:43 – Usando [no-repeat] para mostrar uma única imagem
02:12 – Esticando o fundo com [background-size: 100%]
02:41 – Redimensionando X e Y independentemente (100% 100%, 75%, etc.)
03:26 – Boa prática: movendo o CSS do estilo inline para a tag [style]
04:00 – Código organizado vs alterações rápidas inline
04:26 – Resumo e conclusão

🏷️ Tags
Tutorial HTML, imagem de fundo HTML, tutorial imagem de fundo CSS, adicionar imagem de fundo HTML, fundos CSS HTML, background-size cover, background no-repeat, tutorial HTML para iniciantes, tutorial CSS para iniciantes, fundo de página…