Propriedade de Imagem de Fundo
Última atualização: 2026-09-13
background-image Propriedade de Imagem de Fundo
A propriedade background-image define uma ou mais imagens de fundo em um elemento, suportando caminhos url() e funções de gradiente. Vários fundos são separados por vírgula, com as imagens anteriores sobrepostas no topo. Geralmente é usada junto com background-size e background-position.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
background-image: none | <image> | linear-gradient() | radial-gradient();⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem imagem de fundo |
<image> | Tipo | Imagem url() ou gradiente |
linear-gradient() | radial-gradient() | Função | Gradiente linear ou radial |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Você pode combinar uma imagem de fundo com uma cor de fundo; a imagem é renderizada acima da cor, e a cor aparece pelas áreas transparentes da imagem.
Dica： Imagens geradas por funções de gradiente (linear-gradient, radial-gradient) também contam como imagens de fundo.
❓ Perguntas Frequentes
QComo empilho várias imagens de fundo?
ASepare as imagens com vírgulas, por exemplo background-image: url(a.png), url(b.png), linear-gradient(...); — a primeira fica no topo. Cada camada pode ser controlada independentemente com background-size e background-position, usando valores separados por vírgula que correspondem um a um às camadas.
QO que acontece quando uma imagem de fundo falha ao carregar?
ASe uma background-color também estiver definida, a cor aparece como fallback quando a imagem falha (caminho errado, bloqueada ou formato não suportado); caso contrário, o fundo fica transparente. Lembre-se de que background-image não tem texto alt — imagens de fundo puramente decorativas não devem carregar informações críticas. Use <img> com um texto alternativo para conteúdo significativo.
QQual é a diferença entre background-image e a tag <img>?
Abackground-image faz parte da apresentação em CSS: não está no fluxo do documento, não é indexada por mecanismos de busca, não tem semântica alt e pode ser recortada e posicionada livremente — adequada para fundos decorativos. <img> é conteúdo HTML: tem texto alt, pode ser indexada e selecionada, e destina-se a conteúdo significativo. Quando o carregamento falha, <img> recorre ao seu alt, enquanto uma imagem de fundo simplesmente desaparece.
QComo escrevo gradientes de fundo?
AGradientes são imagens de fundo. linear-gradient(135deg, #667eea, #764ba2) faz a transição ao longo de um ângulo de 135 graus; radial-gradient(circle, #fff, #333) se espalha para fora a partir do centro. Empilhe várias camadas para efeitos mais complexos e mantenha um background-color sólido como fallback.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
