Artigo original: CSS Background Image – How to Add an Image URL to Your Div
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).