Propriedade CSS background-image
A propriedade CSS background-image define uma ou mais imagens de fundo para um elemento, incluindo imagens url() e gradientes. Aprenda a sintaxe e veja exemplos.
A propriedade CSS background-image define uma ou mais imagens de fundo para um elemento. A imagem pode ser um arquivo de imagem real referenciado com url(), ou uma imagem gerada por CSS, como um gradiente.
Por padrão, uma imagem de fundo é posicionada no canto superior esquerdo do elemento e lado a lado (repetida horizontal e verticalmente) para preencher o espaço disponível. Você controla esse comportamento com as propriedades relacionadas background-repeat, background-position, background-size e background-attachment — ou todas de uma vez com o atalho background.
A área de pintura abrange o conteúdo do elemento, o padding e o border box, mas não a margin. Você pode alterar qual box é usado com background-clip e onde o posicionamento começa com background-origin.
Quando usar
Use background-image em vez de um <img> inline quando a imagem for decorativa e não um conteúdo — fundos, texturas, seções hero, gradientes e ícones que não fazem parte do significado da página. Como os fundos não são lidos por leitores de tela, nunca coloque imagens que transmitam informação aqui; use um <img> com texto alt para esses casos.
Algumas coisas importantes a saber de antemão:
- Sempre combine com
background-colorcomo fallback. Se a imagem não carregar (ou ainda estiver sendo baixada), a cor aparece no lugar e mantém o texto legível. - Múltiplas imagens se sobrepõem. Quando você lista várias imagens separadas por vírgulas, a primeira é pintada por cima e cada imagem seguinte fica atrás da anterior.
- Gradientes também são imagens.
linear-gradient()eradial-gradient()produzem imagens CSS, portanto pertencem abackground-image, não abackground-color.
| Valor Inicial | none |
|---|---|
| Aplicável a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS1 + alguns novos valores em CSS3 |
| Sintaxe DOM | object.style.backgroundImage = "url(img_tree.png)"; |
Sintaxe
Sintaxe da Propriedade CSS background-image
background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;Exemplo da propriedade background-image:
Exemplo da Propriedade CSS background-image
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>Hello World!</p>
</body>
</html>Resultado
No próximo exemplo, duas imagens são usadas ao mesmo tempo. Elas são sobrepostas com background-position e background-repeat, e background-attachment: fixed mantém-nas no lugar enquanto a página rola.
Exemplo da propriedade background-image com outras propriedades de fundo:
Exemplo da Propriedade CSS background-image com 2 imagens
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>The background image is positioned 5px from the left, and 50px down from the top.</p>
</body>
</html>Observe as listas separadas por vírgulas acima: background-repeat: no-repeat, repeat aplica no-repeat à primeira imagem e repeat à segunda, na mesma ordem em que as imagens são listadas. Esse mapeamento por imagem é como múltiplos fundos são configurados.
No próximo exemplo, um linear-gradient() com duas paradas de cor é usado como imagem de fundo para um elemento <div>. Como um gradiente é uma imagem, nenhum url() é necessário:
Exemplo da propriedade background-image com o valor "linear-gradient":
Exemplo da Propriedade CSS background-image com o valor linear-gradient
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9);
}
</style>
</head>
<body>
<h2>Linear gradient as a background image example</h2>
<p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
<div></div>
</body>
</html>Exemplo da propriedade background-image com o valor "repeating-radial-gradient":
Exemplo da Propriedade CSS background-image com o valor repeating-radial-gradient
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Radial gradient as a background image example</h2>
<div></div>
</body>
</html>Problemas comuns
- A imagem fica invisível porque o elemento não tem altura. Um fundo precisa de uma caixa para ser pintado. Um
<div>vazio colapsa para altura zero, portanto defina umaheightexplícita (como nos exemplos de gradiente) ou adicione algum conteúdo. - Um
404de fundo falha silenciosamente. Ao contrário de<img>, umurl()quebrado não produz nenhum erro ou ícone de imagem quebrada — a área simplesmente fica vazia (ou exibe obackground-color). Verifique o caminho caso nada apareça. - Use
background-color, nãobackground-image, para uma cor sólida. Gradientes vão embackground-image; cores planas pertencem abackground-color. - O mosaico parece errado? Adicione
background-repeat: no-repeate dimensione a imagem combackground-size(por exemplo,coverpara preencher a caixa).
Valores
| Valor | Descrição |
|---|---|
| url | Define a URL da imagem. Pode ser especificada mais de uma imagem separada por vírgulas. |
| none | Não haverá nenhuma imagem de fundo. É o valor padrão. |
| linear-gradient | Um gradiente linear é especificado como imagem de fundo. |
| radial-gradient | Um gradiente radial é especificado como imagem de fundo. |
| repeating-linear-gradient | Repete um gradiente linear. |
| repeating-radial-gradient | Repete um gradiente radial. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |