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

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

seletor {
	background-image: none;
}

Valores

Valor	Descrição
`url`	Caminho para o arquivo de imagem. O nome da imagem pode estar entre aspas duplas, aspas simples ou sem aspas.
`none`	Remove a imagem de fundo do elemento.

Valor padrão: none.

Exemplo

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

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

#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:

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

#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:

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

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

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo