🌄 background-image

Permite colocar uma imagem no background de um elemento.

Recebe como parâmetro uma ou mais url(), que podem referenciar uma imagem local ou não.

.box {
	background-image: url("photo1.jpg"), 
										url("photo2.jpg");
}

Por padrão, caso a imagem seja grande demais, ela será cortada. Porém, caso seja pequena, ela é repetida várias vezes para preencher todo o fundo, formando um pattern.

Quando essa propriedade recebe mais de um argumento, cria-se diferentes camadas no fundo, uma empilhada sobre a outra. A imagem referenciada primeiro fica na camada mais acima do que a segunda e assim por diante.

🪞 background-repeat

Define como a repetição das background images ocorrerá, tanto na horizontal quanto na vertical.

Pode receber um parâmetro (define o comportamento em ambas as direções) ou dois (o primeiro se refere à horizontal, o segundo se refere à vertical).

.box {
	background-image: url("photo.jpg");
	background-repeat: repeat;
}

Possíveis valores para o(s) parâmetro(s):