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

• CSS 1
• CSS 2.1
• CSS 3

Compatibilidade com navegadores

Veja também

background, background-attachment, background-color, background-image, background-position, background-repeat

Categorias

Interwiki Language Links