É fácil adicionar uma imagem usando a propriedade background-image. Basta fornecer o caminho para a imagem no url() valor.
O caminho da imagem pode ser um URL, como mostrado no exemplo abaixo.
div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("https://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");}Você pode aplicar várias imagens à 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; }Isso é muito código. Vamos dividir.
Separe cada imagem url() valor 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 aprimore suas imagens aplicando propriedades adicionais.
background-repeat: no-repeat, no-repeat;background-position: right, left; Existem vários subpropriedades você pode adicionar às suas imagens de fundo, como background-repeat e background-position, que usamos no exemplo acima. Você pode até adicionar gradientes para uma imagem de fundo.
Veja como é quando reunimos tudo.
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 o 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("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat;}Listamos duas imagens no código acima. A primeira imagem (marrocos-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 restante permanece oculto).
Aqui está o que parece quando reunimos tudo.
Quando você deve usar a imagem de fundo?
Há muito o que gostar sobre a propriedade da imagem de plano de fundo. Mas há uma desvantagem.
A imagem pode não estar acessível a todos os usuários, o documentação ressalta, como aqueles que usam leitores de tela.
Isso ocorre porque você não pode adicionar informações textuais à propriedade da imagem de plano de fundo. Como resultado, a imagem será perdida pelos leitores de tela.
Use a propriedade background-image apenas quando precisar adicionar uma decoração à sua página. Caso contrário, use o HTML
Dessa forma, você pode adicionar texto a um elemento de imagem, usando o alt atributo que descreve a imagem. O texto fornecido será coletado pelos leitores de tela.
Pense da seguinte maneira: background-image é uma propriedade CSS, e o CSS foca na apresentação ou no estilo; O HTML foca na semântica ou no significado.
Quando se trata de imagens, você tem opções. Se for necessária uma imagem para decoração, a propriedade da imagem de fundo pode ser uma boa opção para você.
Escrevo sobre aprender a programar e as melhores maneiras de fazer isso (amymhaddad.com)
