Imagem de fundo CSS - Como adicionar um URL de imagem ao seu Div

Digamos que você queira colocar uma ou duas imagens em uma página da web. Uma maneira é usar a background-imagepropriedade CSS.

Esta propriedade aplica uma ou mais imagens de plano de fundo a um elemento, como a , conforme explica a documentação. Use-o por razões estéticas, como adicionar um plano de fundo texturizado à sua página da web.

Adicionar uma imagem

É fácil adicionar uma imagem usando a background-imagepropriedade. Basta fornecer o caminho para a imagem no url()valor.

O caminho da imagem pode ser um URL, conforme mostrado no exemplo abaixo:

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

Ou pode ser um caminho local. Aqui está um exemplo:

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

Adicionar várias imagens

Você pode aplicar várias imagens à background-imagepropriedade.

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

Isso é muito código. Vamos decompô-lo.

Separe cada url()valor de imagem com uma vírgula.

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

Agora posicione e aprimore suas imagens aplicando propriedades adicionais.

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

Existem várias subpropriedades que você pode adicionar às suas imagens de plano de fundo, como background-repeate background-position, que usamos no exemplo acima. Você pode até adicionar gradientes a uma imagem de fundo.

Veja como fica quando colocamos tudo junto.

Pedidos

A ordem em que você lista suas imagens é importante devido à ordem de empilhamento. Isso significa que a primeira imagem listada é a mais próxima do usuário, de acordo com a documentação. Então, o próximo, e o próximo, e assim por diante.

Aqui está um exemplo.

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

Listamos duas imagens no código acima. A primeira imagem (morocco-blue.png) estará na frente da segunda (oriental-tiles.png). Ambas as imagens têm o mesmo tamanho e não têm opacidade, portanto, vemos apenas a primeira imagem.

Mas se movermos a segunda imagem (oriental-tiles.png) para a direita em 200 pixels, você poderá ver parte dela (o resto permanece oculto).

É assim que fica quando colocamos tudo junto.

Quando você deve usar a imagem de fundo?

Há muito o que gostar sobre a background-imagepropriedade. Mas há uma desvantagem.

A imagem pode não ser acessível a todos os usuários, aponta a documentação, como aqueles que usam leitores de tela.

Isso ocorre porque você não pode adicionar informações textuais à background-imagepropriedade. Como resultado, os leitores de tela perderão a imagem.

Use a background-imagepropriedade apenas quando precisar adicionar alguma decoração à sua página. Caso contrário, use o elemento HTML se uma imagem tiver significado ou propósito, conforme as notas da documentação.

Dessa forma, você pode adicionar texto a um elemento de imagem, usando o altatributo, que descreve a imagem. O texto fornecido será captado por leitores de tela.

Pense nisso desta forma: background-imageé uma propriedade CSS, e CSS se concentra na apresentação ou estilo; HTML se concentra na semântica ou significado.

Quando se trata de imagens, você tem opções. Se for necessária uma imagem para decoração, a background-imagepropriedade pode ser uma boa escolha para você.

Escrevo sobre como aprender a programar e as melhores maneiras de fazer isso ( amymhaddad.com).