Suponhamos que você queira colocar uma ou mais imagens em uma página da web. Uma maneira de fazer isso é utilizando a propriedade do CSS background-image.

Essa propriedade aplica uma ou mais imagens de fundo a um elemento, como a <div>, conforme explicado na documentação (link em inglês). Ela pode ser usada por motivos estéticos, como adicionando um plano de fundo texturizado para sua página da web.

Adicionando uma imagem

É muito simples adicionar uma imagem usando a propriedade background-image. Basta informar o caminho da imagem no valor de url().

Conforme mostrado no exemplo abaixo, o caminho da imagem pode ser um link passado por um URL:

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Também pode ser um caminho local. Aqui está mais um exemplo:

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Adicionando várias imagens

Também é possível adicionar várias imagens na propriedade background-image.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

É muito código! Então, vamos por partes.

Vamos separar cada valor de url() das imagens com uma vírgula.

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Agora posicione e destaque suas imagens aplicando propriedades adicionais.

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

Existem diversas subpropriedades que você pode adicionar às suas imagens de plano de fundo, como background-repeat e/ou background-position, que usamos no exemplo acima. Você também pode adicionar gradientes (link em inglês) em uma imagem de fundo.

Veja como fica quando adicionamos todas as propriedades.

A ordem importa

A ordem em que as imagens são listadas importa devido ao empilhamento. Conforme a documentação (link em inglês), isto significa que a primeira imagem listada está mais próxima do usuário. A segunda vêm logo após a primeira, ficando por trás da primeira imagem, e assim por diante.

Aqui está um exemplo:

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

No código acima, foram listadas duas imagens. A primeira imagem (morocco-blue.png) ficará na frente da segunda (oriental-tiles.png). As duas imagens são do mesmo tamanho e não possuem opacidade. Portanto, só vemos a primeira imagem.

No entanto, se movermos a segunda imagem (oriental-tiles.png) 200px para a direita, será possível ver uma parte dela (o restante permanecerá oculto).

Vejamos abaixo o que acontece quando colocamos tudo junto:

Quando usar a imagem de fundo?

Existem diversas vantagens em usar a propriedade background-image. Porém, há uma desvantagem:

Conforme informado na documentação (link em inglês), a imagem pode não ser acessível a todos os usuários, como àqueles que utilizam leitores de tela.

Isso acontece porque não é possível adicionar informações textuais na propriedade background-image. Desta forma, a imagem será perdida pelos leitores de tela.

Utilize a propriedade background-image apenas quando precisar adicionar alguma decoração à sua página. Caso utilize uma imagem com algum propósito ou significado na sua página da web, é melhor utilizar o elemento HTML <img>, conforme mencionado na documentação (link em inglês).

Desta forma, é possível adicionar um texto descritivo à imagem utilizando o atributo alt. O texto fornecido no atributo será captado pelos leitores de tela.

<img class="house" 
       src="./images/farnsworth_house.jpeg"
       alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Pense assim: background-image é uma propriedade do CSS, e o CSS foca na apresentação ou no estilo; já o HTML foca na semântica ou no significado.

Quando falamos de imagens, existem diversas opções. Se a imagem for apenas decorativa, então a propriedade background-image pode ser uma boa escolha para você.

A autora escreve sobre programação e sobre as melhores maneiras de programar (site da autora: amymhaddad.com).