Propriedade background-image

A propriedade background-image define uma imagem de fundo para um elemento. Por padrão, a imagem preencherá todo o bloco com cópias de si mesma, no entanto, este comportamento pode ser alterado com a propriedade background-repeat.

Sintaxe

cssseletor {
  background-image: url(caminho para a imagem);
}

cssseletor {
  background-image: none;
}

Valores

Valor padrão: none.

Exemplo

Vamos definir uma imagem de fundo usando background-image, impedindo sua repetição com a propriedade background-repeat:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Exemplo

Sem background-repeat a imagem de fundo preencherá todo o bloco:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Exemplo

É possível definir uma imagem de fundo e uma cor de fundo simultaneamente usando background-color. Neste caso, onde não houver imagem de fundo - a cor de fundo será exibida:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Veja também