Atributo background-image CSS

Definição e uso

background-image A propriedade define uma imagem de fundo para o elemento.

O fundo do elemento ocupa todo o tamanho do elemento, incluindo a margem interna e a borda, mas não a margem externa.

Por padrão, a imagem de fundo está no canto superior esquerdo do elemento e é repetida em direção horizontal e vertical.

Dica:Defina uma cor de fundo disponível, para que, se a imagem de fundo não estiver disponível, a página também obtenha um efeito visual bom.

Explicação detalhada

A propriedade background-image define uma imagem no fundo do elemento.

De acordo com background-repeat O valor da propriedade, a imagem pode ser repetida infinitamente, ao longo de um eixo (eixo x ou eixo y), ou não ser repetida.

Imagem de fundo inicial (imagem original) de acordo com background-position Localização do valor da propriedade

Veja também:

Tutorial de CSS:Fundo CSSeFundo CSS (avançado)eGradiente CSS

Manual de referência do HTML DOM:Propriedade backgroundImage

Exemplo

Definir a imagem como fundo da página:

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

Experimente você mesmo

Sintaxe do CSS

background-image: url|none|initial|inherit;

Valor da propriedade

Valor da propriedade

Valor Descrição
url('URL) Caminho para a imagem.
nada Valor padrão. Não exibir imagem de fundo.
inherit Deve-se herdar a configuração da propriedade background-image do elemento pai.

Detalhes técnicos

Valor padrão: nada
Herança: não
Versão: CSS1
Sintaxe do JavaScript: object.style.backgroundImage="url(stars.gif)"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta plenamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5