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