Inserir uma imagem de fundo é um recurso muito utilizado em sites, já que permite personalizar páginas, destacar informações e criar uma experiência visual mais agradável. Aprenda como colocar imagem de fundo no HTML via CSS, com passo a passo e exemplos claros e práticos.
Passo a passo para adicionar uma imagem de fundo no HTML com CSS
Adicionar uma imagem de fundo em uma página HTML via CSS é simples, mas requer atenção à estrutura do código e ao caminho correto.
Esse recurso é muito utilizado para personalizar seções, destacar áreas específicas ou aplicar identidade visual ao site. A propriedade principal usada para isso é a background-image.
O primeiro passo é garantir que a imagem está acessível no projeto. Ela pode estar em uma pasta local (como img/) ou hospedada em um link externo.
A seguir, veja como aplicar a imagem de fundo com os diferentes métodos de uso do CSS.
Método com CSS inline (não recomendado para grandes projetos)
Este método aplica o estilo diretamente na tag HTML. Ele funciona para testes rápidos, mas não é ideal para manutenção ou projetos mais robustos.
Exemplo:
<div style="background-image: url('img/fundo.jpg'); width: 100%; height: 300px;">
Conteúdo aqui
</div>
Neste caso:
- a propriedade background-image recebe a URL da imagem;
- é necessário definir largura e altura, senão o fundo pode não aparecer;
- o estilo fica acoplado ao HTML, o que prejudica a organização do código.
Método com CSS interno (por meio da tag <style>)
Ideal para páginas simples ou testes locais, o CSS interno fica dentro da própria página HTML. Veja o exemplo.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Exemplo com CSS interno</title> <style> .fundo { background-image: url('img/fundo.jpg'); width: 100%; height: 300px; } </style> </head> <body> <div class="fundo"> Conteúdo com fundo de imagem </div> </body> </html> Explicação:
- a tag <style> deve estar dentro da seção <head>;
- a imagem é aplicada em uma classe chamada .fundo, que pode ser usada em qualquer elemento;
- o HTML fica mais limpo do que no método inline.
Método com CSS externo (mais indicado)
Este é o formato mais recomendado para projetos reais. O CSS é separado do HTML, o que facilita a manutenção e reaproveitamento do código.
Exemplo (HTML):
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Exemplo com CSS externo</title> <link rel="stylesheet" href="estilo.css"> </head> <body> <div class="fundo"> Conteúdo com imagem de fundo </div> </body> </html>
Exemplo CSS (arquivo estilo.css):
.fundo { background-image: url('img/fundo.jpg'); width: 100%; height: 300px; }
Para explicar:
- o HTML referencia o arquivo externo com <link rel=”stylesheet”>;
- a imagem é aplicada da mesma forma, mas o código fica organizado e reutilizável;
- o caminho da imagem precisa estar correto em relação ao arquivo CSS, não ao HTML.
Todos os métodos usam a propriedade background-image, que é responsável por aplicar a imagem ao elemento desejado.
O mais indicado, especialmente em projetos maiores, é usar CSS externo. Ele permite controlar estilos de várias páginas com um único arquivo, facilita manutenções futuras e melhora a performance do código.
Como evitar a repetição da imagem de fundo?
Por padrão, ao aplicar uma imagem de fundo com CSS, ela é automaticamente repetida tanto na horizontal quanto na vertical para preencher todo o espaço do elemento. Mas esse pode não ser o comportamento desejado, principalmente ao usar uma imagem única de destaque, como um banner ou uma ilustração decorativa.
Para controlar esse comportamento, usa-se a propriedade background-repeat.
background-repeat: no-repeat
Se a ideia for exibir a imagem apenas uma vez, sem repetir, essa é a opção ideal.
Exemplo:
.banner { background-image: url('img/banner.jpg'); background-repeat: no-repeat; width: 100%; height: 300px; }
Assim, a imagem aparece uma única vez no canto superior esquerdo (posição padrão) e o restante do fundo permanece vazio ou com a cor definida.
Outras opções de repetição
A propriedade background-repeat também permite controlar a repetição apenas em uma direção.
- repeat-x: repete a imagem apenas na horizontal;
- repeat-y: repete a imagem apenas na vertical.
.horizontal { background-image: url('img/linha.png'); background-repeat: repeat-x; } .vertical { background-image: url('img/listra.png'); background-repeat: repeat-y; }
Essas opções são úteis em casos como divisores de seção ou bordas decorativas.
space e round
Confira outras duas opções menos comuns, mas importantes.
- space: distribui a imagem repetida com espaços iguais entre elas;
- round: redimensiona a imagem para que ela se ajuste perfeitamente ao espaço, ao criar repetições se necessário.
Exemplos:
.espacada { background-image: url('img/padrao.png'); background-repeat: space; } .ajustada { background-image: url('img/padrao.png'); background-repeat: round; }
Esses valores oferecem controle mais preciso em layouts decorativos ou padrões gráficos.
Com background-repeat, é possível evitar repetições indesejadas ou aplicar efeitos visuais personalizados de forma simples e eficiente.
Como definir a posição do segundo plano?
A propriedade background-position é usada para definir exatamente onde a imagem de fundo será exibida dentro do elemento. Ela é essencial para garantir que a parte mais importante da imagem esteja visível, principalmente ao utilizar imagens de destaque, como banners ou elementos gráficos decorativos.
Sintaxe básica e valores simples
Os valores mais comuns usados com background-position são palavras-chave que indicam a posição, conforme o exemplo.
.caixa { background-image: url('img/fundo.jpg'); background-repeat: no-repeat; background-position: top; }
Outros valores possíveis:
- top left (ou apenas top);
- top center;
- top right;
- center left;
- center center;
- center right;
- bottom left;
- bottom center;
- bottom right.
Essas combinações ajudam a centralizar ou alinhar a imagem no canto desejado do elemento.
Valores com porcentagem ou pixels
Também é possível definir posições com valores mais precisos, por meio de unidades como % ou px. Veja:
.personalizado { background-image: url('img/fundo.jpg'); background-repeat: no-repeat; background-position: 50% 20px; }
Nesse exemplo:
- 50% posiciona horizontalmente a imagem no centro do elemento;
- 20px posiciona verticalmente 20 pixels a partir do topo.
Essa configuração dá mais controle quando é necessário alinhar a imagem com outros elementos da interface.
Destaque visual com background-position
A posição do fundo pode influenciar diretamente na composição visual do site. Por exemplo, ao usar uma imagem de produto ou pessoa, pode-se posicionar o foco da imagem no centro da tela, para que o destaque fique bem visível em diferentes tamanhos de tela.
Exemplo:
.destaque { background-image: url('img/produto.jpg'); background-repeat: no-repeat; background-position: center center; }
Usar background-position de forma estratégica ajuda a manter a estética e a legibilidade do conteúdo, mesmo em layouts responsivos.
Propriedades complementares para ajustar a imagem de fundo
Além de definir a imagem com background-image e ajustar sua repetição e posição, outras propriedades do CSS permitem um controle mais preciso sobre como ela aparece. Assim, é possível garantir que a imagem se encaixe bem em diferentes elementos, proporções e dispositivos.
A seguir, exploraremos essas propriedades complementares para ajustar o visual de maneira eficiente e responsiva.
background-size
A propriedade background-size controla o tamanho da imagem aplicada no fundo. Ela é essencial para garantir que a imagem fique proporcional ao elemento, sem distorções ou cortes indesejados.
Valores mais comuns
O valor cover redimensiona a imagem para cobrir toda a área do elemento. Ela pode ser cortada para manter a proporção, e é ideal para banners de tela cheia ou fundos que devem preencher o espaço visual.
.full { background-image: url('img/banner.jpg'); background-size: cover; background-repeat: no-repeat; }
Já contain redimensiona a imagem para caber totalmente dentro do elemento. Ela é ajustada, mas pode deixar espaços vazios se as proporções forem diferentes. É um valor útil para imagens de logotipo, gráficos e elementos que não podem ser cortados.
.ajustada { background-image: url('img/logo.png'); background-size: contain; background-repeat: no-repeat; }
Tamanhos personalizados
É possível definir tamanhos exatos com unidades como pixels (px), porcentagem (%) ou até usar dois valores (largura e altura):
.personalizada { background-image: url('img/textura.png'); background-size: 200px 100px; }
Essas opções são úteis quando se precisa de mais controle sobre a escala da imagem, especialmente em padrões decorativos ou layouts específicos.
background-repeat
Embora já tenha sido apresentado anteriormente, vale reforçar a importância do background-repeat como parte da combinação com outras propriedades.
Usar no-repeat, repeat-x, repeat-y, space ou round em conjunto com background-size permite criar layouts muito mais controlados e visuais agradáveis.
Exemplo:
.banner { background-image: url('img/banner.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; }
Nesse caso, a imagem cobre todo o elemento, aparece apenas uma vez e está centralizada, para manter um fundo bonito em vários tipos de tela.
Controlar a repetição é essencial para evitar que a imagem se multiplique de forma não intencional, o que pode prejudicar a aparência e legibilidade do conteúdo.
background-position
A propriedade background-position define onde a imagem de fundo será exibida dentro do elemento. Embora já tenhamos visto exemplos visuais, é importante compreender os aspectos técnicos dos valores aceitos.
Os valores podem ser palavras-chave (top, right, center, bottom, left), unidades de medida (px, %) ou uma combinação dos dois:
.elemento { background-position: right bottom; } Ou com unidades: .elemento { background-position: 30px 60px; }
A ordem dos valores importa: o primeiro define a posição horizontal, e o segundo, a vertical. Isso garante precisão na hora de alinhar a imagem ao conteúdo.
background-attachment
A propriedade background-attachment define se a imagem de fundo se move com o conteúdo da página ou permanece fixa.
Valores disponíveis:
- scroll (padrão): o fundo rola com o conteúdo da página;
- fixed: o fundo permanece fixo enquanto o conteúdo rola — cria o efeito conhecido como parallax;
- local: o fundo rola com o conteúdo do próprio elemento, caso ele tenha rolagem interna (scroll). Isso é útil para que a imagem acompanhe a rolagem interna, por exemplo.
Exemplo:
.parallax { background-image: url('img/fundo.jpg'); background-attachment: fixed; background-size: cover; background-position: center; }
Esse efeito pode ser aplicado a seções específicas para dar uma sensação de profundidade no design. Apesar de ser simples de usar, deve ser testado com atenção à performance em dispositivos móveis.
Atalho: background shorthand
A propriedade background permite agrupar todas as configurações do fundo em uma única linha. Isso economiza código e melhora a organização do CSS.
Ordem dos valores no shorthand:
- background-color;
- background-image;
- background-position;
- background-size (após /);
- background-repeat;
- background-attachment;
- background-origin e background-clip (opcionais).
Exemplo completo com comentários:
.bloco { background: #ffffff /* Cor de fundo */ url('img/banner.jpg') /* Imagem de fundo */ center top / cover /* Posição e tamanho */ no-repeat /* Repetição */ fixed; /* Comportamento no scroll */ }
Se precisar incluir background-size, use a barra (/) para separá-lo da posição.
Esse atalho é útil em projetos que exigem organização e consistência no código. Mas vale lembrar: usar background sobrescreve todas as propriedades individuais, então evite misturar shorthand com declarações separadas no mesmo seletor para evitar conflitos.
Como usar CSS opacity para deixar a imagem transparente
Aplicar transparência à imagem de fundo pode criar efeitos visuais interessantes, como sobrepor texto sobre imagens sem comprometer a leitura. No CSS, isso é feito com a propriedade opacity, mas há algumas particularidades importantes que precisam ser consideradas.
A maneira mais direta de deixar qualquer elemento (inclusive o fundo) transparente é com a propriedade opacity. Ela aceita valores de 0 a 1, em que 0 representa totalmente transparente e 1, totalmente opaco:
.fundo-transparente { background-image: url('img/fundo.jpg'); opacity: 0.5; }
No entanto, usar opacity dessa forma afeta o elemento inteiro, ou seja, todo o conteúdo dentro dele também ficará transparente. Isso pode prejudicar a visibilidade de textos, botões e outros elementos.
Limitações ao usar opacity diretamente no background
A maior limitação do uso direto da propriedade opacity é que ela não atua exclusivamente sobre o background-image. Como o valor é aplicado ao elemento como um todo, qualquer conteúdo interno será igualmente afetado.
.aviso { background-image: url('img/alerta.png'); opacity: 0.3; color: #000; }
Nesse exemplo, o texto “aviso” também ficará com 30% de opacidade, o que pode dificultar a leitura.
Por isso, quando o objetivo é deixar apenas a imagem de fundo mais clara ou sutil sem interferir no conteúdo, o ideal é adotar soluções alternativas — como o uso de pseudo-elementos (::before ou ::after) ou o uso de cores com transparência via rgba(), que veremos a seguir.
Essas abordagens permitem aplicar efeitos de transparência ao fundo sem prejudicar o restante do layout ou acessibilidade da página.
Alterar a opacidade do background com rgba
Uma forma eficiente de aplicar transparência apenas ao fundo, sem afetar o conteúdo do elemento, é utilizar cores no formato rgba(). Esse formato permite definir a cor e o nível de opacidade de forma direta.
A sigla rgba significa: red, green, blue, alpha, com alpha como valor de transparência. O valor vai de 0 (totalmente transparente) a 1 (totalmente opaco).
.fundo-claro { background-color: rgba(0, 0, 0, 0.3); /* Preto com 30% de opacidade */ color: #fff; padding: 20px; }
Esse método é ideal quando o plano de fundo é uma cor sólida. Ele preserva a opacidade do fundo sem interferir na opacidade de textos ou outros elementos dentro do bloco.
Se a intenção for usar uma imagem de fundo translúcida, o rgba() pode ser combinado com técnicas como sobreposições de cor (color overlay) para suavizar a imagem, já que aplica um fundo semi-transparente por cima da imagem real — algo muito usado em seções de destaque.
Usar pseudo-elementos para efeito de transparência
Quando é necessário aplicar transparência somente na imagem de fundo, sem afetar o conteúdo do elemento, uma técnica eficaz é o uso de pseudo-elementos ::before ou ::after. Com eles, é possível adicionar uma camada separada com opacidade ajustável.
Veja um exemplo prático:
.bloco { position: relative; z-index: 1; color: #fff; } .bloco::before { content: ""; background-image: url('img/fundo.jpg'); opacity: 0.3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
Nesse caso, o pseudo-elemento cria um “fundo transparente” independente do conteúdo real. A opacidade é aplicada apenas à imagem, sem alterar o texto ou os botões dentro do bloco.
Essa abordagem é muito usada em banners, chamadas visuais ou áreas de destaque onde o contraste e a legibilidade precisam ser mantidos.
Melhores práticas para imagens de fundo
Imagens de fundo são ótimos recursos visuais, mas também podem comprometer o desempenho do site se não forem usadas com cuidado.
Algumas boas práticas ajudam a manter o equilíbrio entre estética, velocidade de carregamento e responsividade — aspectos fundamentais para uma boa experiência de quem acessa a página.
Otimização para carregamento rápido
Imagens pesadas deixam o site lento e afetam tanto a navegação quanto o ranqueamento em mecanismos de busca. Por isso, a otimização é essencial.
Uma das primeiras ações é comprimir as imagens, sem perda significativa de qualidade. Ferramentas como TinyPNG, Squoosh ou ImageOptim são ótimas opções para isso.
Outra técnica importante é o lazy loading, que adia o carregamento de imagens até que elas estejam prestes a aparecer na tela. Embora essa técnica seja mais comum em imagens HTML (<img>), ela também pode ser aplicada com CSS via JavaScript ou frameworks modernos.
Além disso, hospedar imagens em uma CDN (Content Delivery Network) acelera o carregamento ao distribuir os arquivos em servidores espalhados geograficamente e garante que quem acessa o site baixe os recursos do ponto mais próximo.
Escolha do formato ideal (JPEG, PNG, WebP)
A escolha do formato da imagem afeta diretamente tanto a qualidade quanto o desempenho. Veja os formatos mais usados para fundos.
- JPEG: ideal para fotos e imagens com muitos detalhes. Ele tem boa compressão e peso reduzido, mas não suporta transparência;
- PNG: suporta fundo transparente e é ideal para imagens com poucos detalhes ou elementos gráficos como ícones e logotipos. Porém, ele costuma ter um tamanho maior;
- WebP: mais moderno, o WebP oferece alta compressão com boa qualidade, superior ao JPEG e PNG em muitos casos. Navegadores modernos já oferecem suporte ao formato.
A recomendação é priorizar o uso de WebP sempre que possível, e manter versões alternativas em JPEG ou PNG para garantir compatibilidade com navegadores mais antigos.
Imagens responsivas e media queries
Para que o fundo se adapte bem a diferentes tamanhos de tela, o uso de media queries no CSS é essencial. Essa técnica permite alterar a imagem, o tamanho ou até remover o background em telas menores.
Exemplo prático:
body { background-image: url('img/fundo-desktop.jpg'); } @media (max-width: 768px) { body { background-image: url('img/fundo-mobile.jpg'); } }
Também é possível ajustar o background-size e background-position com base no tamanho da tela. Isso garante que a imagem não fique distorcida ou mal posicionada.
Outra dica é testar a legibilidade do conteúdo sobre a imagem em diferentes resoluções. Para isso, verifique se o contraste e o layout funcionam bem em monitores grandes e dispositivos móveis. Assim, os textos não sobrepõem áreas da imagem.
O que é a propriedade background no CSS?
A propriedade background no CSS é uma forma abreviada (shorthand) que permite configurar várias características do plano de fundo de um elemento em uma única linha.
Com ela, é possível definir a cor de fundo, a imagem, a posição, a repetição, o tamanho e o comportamento de rolagem (attachment) de forma prática e direta.
Essa propriedade agrupa os seguintes valores, geralmente nesta ordem:
- background-color (cor de fundo);
- background-image (imagem de fundo);
- background-position (posição da imagem);
- background-size (tamanho da imagem — opcional, com /);
- background-repeat (repetição);
- background-attachment (comportamento na rolagem);
Veja um exemplo prático que combina esses valores.
body { background: #f0f0f0 url('paisagem.jpg') no-repeat center/cover fixed; }
Nesse exemplo:
- #f0f0f0 define a cor de fundo;
- url(‘paisagem.jpg’) insere a imagem;
- no-repeat impede a repetição da imagem;
- center/cover posiciona a imagem ao centro e a redimensiona para cobrir todo o elemento;
- fixed mantém a imagem fixa no fundo, enquanto o conteúdo rola.
É importante lembrar que todos esses valores podem ser definidos separadamente, mas o uso do shorthand background ajuda a deixar o código mais limpo e legível, especialmente quando todas as propriedades são usadas em conjunto.
Se algum dos valores não for informado no shorthand, ele será considerado padrão. Por isso, é necessário ter atenção para não sobrescrever ou esquecer alguma configuração importante ao usar essa forma compacta.
Conclusão
Após explorar recursos básicos até os avançados, você já sabe como colocar imagem de fundo no HTML por meio do CSS. Você também aprendeu a aplicar imagens com diferentes tipos de CSS, controlar repetição, posição, tamanho e até adicionar efeitos de transparência com técnicas modernas.
Dominar a propriedade background é essencial para criar interfaces visuais mais atrativas e responsivas. Além de valorizar o design, o uso inteligente do background impacta a performance e a experiência de quem acessa o site.
Para fixar o aprendizado, vale a pena praticar com pequenos projetos: criar uma landing page com imagem de fundo, simular banners com diferentes tamanhos ou adaptar um layout responsivo com media queries.
A prática é o caminho para se tornar confiante com CSS!
E se você busca uma boa hospedagem de sites para seu projeto, conheça agora mesmo as soluções da Locaweb!