background-image
Resumo
A propriedade background-image
configura a imagem de fundo para um elemento.
- Valor inicial: none
- Aplica-se a: todos os elementos
- Herdado: não
- Porcentagens: N/A
- Mídia: visual
- Valor computado: URI absoluta ou none
Sintaxe
background-image:uri | none | inherit
Valores
- uri
- A localização da imagem de recurso para ser usada como imagem de fundo.
- none
- Usado para especificar que um elemento não tem imagem de fundo.
Exemplos
Note that the star image is partially transparent and is layered over the cat image.
HTML
<div>
<p class="catsandstars">
This paragraph is full of cats<br />and stars.
</p>
<p>This paragraph is not.</p>
<p class="catsandstars">
Here are more cats for you.<br />Look at them!
</p>
<p>And no more.</p>
</div>
CSS
pre, p {
font-size: 1.5em;
color: #FE7F88;
background-color: transparent;
}
div {
background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
p {
background-image: none;
}
.catsandstars {
background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png");
background-color: transparent;
}
Result
Notas
Desenvolvedores devem assegurar-se de especificar um background-color
para ser usado se uma imagem não estiver disponível. Imagens de fundo são renderizadas sobre a cor de fundo.
Especificações
Compatibilidade com navegadores
Navegador | Versão mais antiga |
---|---|
Internet Explorer | 4 |
Firefox | 1 |
Netscape | 4 |
Opera | 3.5 |
Veja também
background
, background-attachment
, background-color
, background-image
, background-position
, background-repeat
Categorias
Interwiki Language Links