Artigo original: CSS Background Image – With HTML Example Code

O que um usuário vê em um site da web influenciará sua experiência de usuário. Também afetará a facilidade ou a dificuldade em ver o site como um todo.

Adicionar imagens ao fundo de determinadas partes de um site da web, em geral, é mais agradável e interessante visualmente do que meramente trocar uma cor de fundo.

Navegadores modernos dão suporte a vários tipos de arquivos de imagem, como .jpg, .png, .gif e .svg.

Este artigo explica como adicionar imagens ao código HTML e como ajustá-las para terem uma aparência melhor.

Sintaxe para as imagens de fundo ( background-image)

O primeiro passo é criar um diretório (pasta) onde inserir seus itens para manter as imagens que você quer usar em seu projeto.

Por exemplo, podemos criar uma pasta images no projeto em que estamos trabalhando e adicionar uma imagem chamada sunset.png, a qual queremos usar.

A propriedade do CSS background-image permite que você coloque uma imagem por trás de qualquer elemento do HTML.

Esse elemento pode ser a página inteira (usando o seletor body no CSS, que estiliza o elemento <body> no HTML) ou uma parte específica da página, como o elemento section do exemplo a seguir.

Para adicionar uma background-image à tag section em seu arquivo .css, escreva o seguinte código:

section {
     background-image: url("images/sunset.png");
}

Vamos discutir em detalhes o que ocorre aqui:

  • section especifica a tag na qual você deseja adicionar a imagem.
  • url() é usado para informar ao CSS a localização da imagem a ser usada.
  • Dentro dos parênteses, "images/sunset.png" é o caminho para a imagem. Isso permite que o navegador saiba qual o URL deve acessar.
  • O caminho neste exemplo é chamado de caminho relativo. Isso quer dizer que ele é um arquivo local, relativo ao nosso projeto e ao nosso diretório de trabalho atual, não um endereço da web. Para adicionar imagens, também podemos usar um caminho absoluto, que é um endereço da web completo e que inicia com um URL de domínio (http://www.).
  • O uso das aspas é uma boa prática, mas é possível omiti-las. Assim, background-image: url(images/sunset.png) também funcionaria.
  • Não se esqueça do ponto e vírgula!

Como evitar a repetição da imagem de fundo

Ao aplicar uma imagem de fundo a um elemento, por padrão, ela se repetirá.

Se a imagem for menor do que o elemento do qual ela será a imagem de fundo, ela se repetirá para preencher o elemento.

Como evitamos que isso aconteça?

A propriedade background-repeat recebe quatro valores. Podemos alterar a direção na qual a imagem se repete ou evitar que ela se repita por completo.

section {
    background-repeat: repeat;
}

Acima, vemos o valor padrão para a propriedade background-repeat se não dermos a ela um valor. Nesse caso, a imagem é repetida tanto na horizontal quanto na vertical. Assim, ela se repetirá tanto na direção do eixo x quanto na do eixo y, respectivamente, até preencher o espaço.

Screenshot-2021-07-20-at-9.10.06-PM
section {
    background-repeat: no-repeat;
}
Screenshot-2021-07-20-at-9.11.39-PM

O valor no-repeat evita que a imagem se repita em qualquer direção. A imagem é mostrada apenas uma vez.

section {
    background-repeat: repeat-x;
}

Esse valor repete a imagem apenas na horizontal. A imagem é repetida ao longo da página se usamos repeat-x. O eixo x, na matemática, é o eixo horizontal.

section {
    background-repeat: repeat-y;
}

Esse valor repete a imagem apenas na vertical. A imagem é repetida de cima para baixo na página usando repeat-y. O eixo y, na matemática, é o eixo vertical.

Como definir a posição do segundo plano

Após adicionar uma imagem de fundo e evitar que ela se repita, podemos controlar sua colocação no segundo plano do elemento, melhorando seu posicionamento.

Usaremos a propriedade background-position para fazer isso.

O seletor recebe dois valores. O primeiro valor é a posição na horizontal, ou no eixo x. O segundo é a posição na vertical, ou no eixo y.

Esses valores podem ser expressos em unidades, como em pixels:

section {
    background-position: 20px 30px;
}

Isso moverá a imagem 20px na horizontal e 30px na vertical com relação ao elemento que a contém.

Em vez de pixels, podemos usar um conjunto de palavras-chave, como right, left, top, down e center para colocar a imagem à direita, esquerda, acima, abaixo ou ao centro do element, respectivamente.

section {
    background-position: right center;
}

Isso coloca a imagem à direita do elemento e ao centro.

Screenshot-2021-07-21-at-9.02.55-AM

Se quisermos centralizar a imagem na horizontal e na vertical, fazemos o seguinte:

section {
    background-position: center center;
}
Screenshot-2021-07-21-at-9.07.41-AM

Para detalhar ainda mais o posicionamento da imagem, vale a pena mencionar que podemos usar porcentagens.

section {
    background-position: 20% 40%;
}

Isso posiciona a imagem a 20% do eixo horizontal e a 40% do eixo vertical do elemento.

Até agora, vimos valores usados em combinação, mas também podemos especificar apenas um valor. Como exemplo disso, temos background-position: 20px;, background-position: center; ou background-position: 20%;. Usando apenas um valor, aplicamos esse valor a ambas as direções.

Como redimensionar uma imagem de fundo

Para controlar o tamanho de uma imagem de fundo, podemos usar a propriedade background-size.

Assim como nas propriedades anteriores mencionadas, ela recebe dois valores, um para a horizontal (eixo x) e o outro para a vertical (eixo y).

Podemos usar pixels, assim:

section {
    background-size: 20px 40px;
    /* dimensiona a imagem image 20px na horizontal e 40px na vertical */
}

Se não soubermos a largura exata do contêiner em que a imagem é usada de fundo, há um conjunto de valores específicos que podemos dar à propriedade.

  • background-size: cover; redimensiona a imagem de fundo para que cubra todo o espaço do fundo do elemento, não importando sua largura. Se a imagem for muito grande e tiver uma proporção maior que a do elemento, isso significa que a imagem será esticada e, portanto, cortada em suas arestas.
  • background-size: contain; contém a imagem, como o nome sugere. Ela garantirá que a imagem inteira seja mostrada no fundo sem cortar parte alguma dela. Se a imagem for muito menor do que o elemento, haverá espaço sobrando, o que a fará repetir para preencher o fundo. Assim, podemos usar a regra background-repeat: no-repeat;, conforme mencionamos anteriormente.

A regra background-size:cover;, no caso abaixo, cortará partes da imagem:

Screenshot-2021-07-21-at-9.18.15-AM

Ao mudarmos para background-size:contain;, veremos que a imagem se encolhe para se ajustar ao elemento section.

Screenshot-2021-07-21-at-9.18.49-AM

Como usar a propriedade background-attachment

Com a propriedade background-attachment, podemos controlar onde a imagem de fundo está colocada, o que significa saber se a imagem estará fixa ou não com relação ao navegador.

O valor padrão background-attachment: scroll;, onde a imagem de fundo permanece com seu elemento e segue o fluxo natural da página, rolando para cima e para baixo quando fazemos isso com a página.

O segundo valor que a propriedade pode ter é background-attachement: fixed;.
Isso faz com que a imagem de fundo permaneça na mesma posição, fixada à página e à viewport do navegador. Isso cria um efeito parallax. Você pode ver um exemplo disso aqui:

Gradientes de fundo

Um caso de uso diferente para a propriedade background-image é informar ao navegador para criar um gradiente.

background-image, nesse caso, não tem um URL, mas um "gradiente linear".

A maneira mais simples de se fazer isso é especificar um ângulo. Isso controla a direção do gradiente e o modo como as cores serão misturadas. Por fim, adicione as duas cores que você quer misturadas em um gradiente para o fundo do elemento.

Um gradiente que vá de cima para baixo e do preto ao branco pode ser definido assim:

section {
    background-image: linear-gradient(black,white);
}

Os ângulos mais usados para os gradientes são:

  • 0deg, de cima para baixo
  • 90deg, da esquerda para a direita
  • 180deg, de baixo para cima
  • 270deg, da direita para a esquerda

Os ângulos acima correspondem a to top, to right, to bottom e to left, respectivamente.

section{
  background-image: linear-gradient(to left,pink,orange);
}

Em vez de usar as palavras-chave das cores, podemos usar cores em hexadecimal para sermos mais específicos e ter um intervalo maior de opções:

section{
  background-image: linear-gradient(to left,#42275a, #734b6d)
}

Também podemos incluir mais de duas cores em um gradiente, criando efeitos e esquemas de cores diversos.

Conclusão

Isso marca o final de nossa introdução à sintaxe básica da propriedade background-image.

A partir daqui, as possibilidades são ilimitadas e deixa espaço para usarmos toda nossa expressão criativa. Esses efeitos ajudam o usuário a ter uma experiência agradável ao visitar seu site na web.

Espero que o artigo tenha sido útil. Obrigado pela leitura.

Divirta-se com suas criações em design e uma ótima programação para você!