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-image
propriedade 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-image
propriedade. 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-image
propriedade.
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-repeat
e 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-image
propriedade. 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-image
propriedade. Como resultado, os leitores de tela perderão a imagem.
Use a background-image
propriedade 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 alt
atributo, 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-image
propriedade pode ser uma boa escolha para você.
Escrevo sobre como aprender a programar e as melhores maneiras de fazer isso ( amymhaddad.com).