Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-image

Esta tradução não está completa. Por favor ajude a traduzir este artigo a partir do Inglês.

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

Etiquetas do documento e colaboradores

 Colaboradores para esta página: SphinxKnight, teoli, Verruckt
 Última atualização por: SphinxKnight,