Planos de fundo

Podcast do CSS - 053: Contexto

Planos de fundo

Por trás de cada caixa de CSS há uma camada especializada, chamada de camada de segundo plano. Com o CSS, é possível fazer mudanças significativas nele de várias maneiras, incluindo permitir vários planos de fundo.

As camadas de plano de fundo são mais distantes do usuário, renderizadas atrás do conteúdo de uma caixa a partir da região padding-box. Isso permite que a camada de segundo plano não se sobreponha às bordas.

Cor do plano de fundo

Um dos efeitos mais simples que você pode aplicar a uma camada de segundo plano é definir a cor. O valor inicial de background-color é transparent, o que permite que o conteúdo de um pai seja visível. Uma cor válida definida em uma camada de segundo plano fica atrás de outras coisas pintadas nesse elemento.

Imagens de plano de fundo

É possível adicionar uma imagem de plano de fundo usando a propriedade background-image na parte de cima da camada background-color. Um background-image aceita o seguinte:

• Um URL de imagem ou URI de dados usando a função CSS url.
• Uma imagem criada dinamicamente por uma função CSS de gradiente.

Como definir uma imagem de plano de fundo com a função CSS url

Planos de fundo gradientes CSS

Existem várias funções CSS de gradiente que permitem gerar uma imagem de plano de fundo quando duas ou mais cores são transmitidas.

Seja qual for a função de gradiente usada, a imagem resultante tem um tamanho intrínseco para corresponder à quantidade de espaço disponível.

Demonstração com um exemplo de aplicação de uma imagem de plano de fundo usando funções gradiente:

Repetição de imagens de plano de fundo

Por padrão, as imagens de plano de fundo se repetem horizontal e verticalmente para preencher todo o espaço da camada de plano de fundo.

Para mudar isso, use a propriedade background-repeat com um dos seguintes valores:

• repeat: a imagem se repete dentro do espaço disponível, cortando conforme necessário.
• round: a imagem se repete horizontal e verticalmente para ajustar o máximo de instâncias ao espaço disponível. À medida que o espaço disponível aumenta a imagem e, depois de estender metade da largura original, ela é compactada para adicionar mais instâncias de imagem.
• space: a imagem é repetida horizontalmente e verticalmente para ajustar o número de instâncias dentro do espaço disponível sem cortes, espaçando as instâncias da imagem conforme necessário. Imagens repetidas tocam as bordas do espaço que uma camada de plano de fundo ocupa, com espaço em branco distribuído uniformemente entre elas.

A propriedade background-repeat permite definir o comportamento dos eixos x e y de maneira independente. O primeiro parâmetro define o comportamento de repetição horizontal, e o segundo define o comportamento de repetição vertical.

Se você usar um único valor, ele será aplicado às repetições horizontal e vertical.

A abreviação também tem opções convenientes de uma palavra para tornar sua intenção mais clara.

O valor repeat-x repete uma imagem somente na horizontal; isso é equivalente a repeat no-repeat.

A demonstração a seguir demonstra esses recursos da propriedade background-repeat:

Posição do plano de fundo

Você deve ter notado que, quando algumas imagens na Web são estilizadas com uma declaração background-repeat: no-repeat, elas são exibidas no canto superior esquerdo do contêiner.

A posição inicial das imagens de plano de fundo fica no canto superior esquerdo. A propriedade background-position permite mudar esse comportamento, ajustando a posição da imagem.

Assim como em background-repeat, a propriedade background-position permite posicionar imagens ao longo dos eixos x e y de maneira independente, com dois valores por padrão.

Quando comprimentos e porcentagens CSS são usados, o primeiro parâmetro corresponde ao eixo horizontal, enquanto o segundo parâmetro corresponde ao eixo vertical.

Quando as palavras-chave são usadas apenas, a ordem delas não importa:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

A propriedade background-position também tem uma abreviação conveniente de um valor. O valor omitido é resolvido como 50%. Confira um exemplo que demonstra isso usando as palavras-chave que a propriedade background-position aceita:

Além do formulário padrão de dois parâmetros e um de parâmetro, a propriedade background-position também aceita até quatro parâmetros.

Quando três ou quatro parâmetros são usados, o comprimento ou a porcentagem de CSS precisa ser precedido pelas palavras-chave top, left, right ou bottom para que o navegador calcule de qual borda da caixa CSS o deslocamento deve se originar.

Quando três parâmetros são usados, o comprimento ou valor de CSS pode ser o segundo ou terceiro parâmetro, sendo que os outros dois são palavras-chave. A palavra-chave usada para determinar o limite do comprimento ou do valor do CSS corresponde ao deslocamento. O deslocamento da outra palavra-chave especificada é definido como 0.

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

Se background-position: top left 20% for aplicado a uma imagem de plano de fundo CSS, a imagem vai ser colocada na parte de cima da caixa, o valor 20% vai representar um deslocamento de 20% do lado esquerdo da caixa (no eixo x).

Se background-position: top 20% left for aplicado a uma imagem de plano de fundo CSS, o valor de 20% representará um deslocamento de 20% da parte de cima da caixa CSS (no eixo y), e a imagem será colocada à esquerda da caixa.

Quando quatro parâmetros são usados, as duas palavras-chave são pareadas com dois valores correspondentes a um deslocamento em relação às origens de cada palavra-chave especificada. Se background-position: bottom 20% right 30% for aplicado a uma imagem de plano de fundo, ela será posicionada 20% da parte de baixo e 30% da direita da caixa CSS.

A demonstração a seguir demonstra esse comportamento:

Veja mais exemplos de como usar a propriedade background-position com uma combinação de valores de CSS e de palavra-chave:

Tamanho do plano de fundo

A propriedade background-size define o tamanho das imagens de plano de fundo. Por padrão, as imagens de plano de fundo são dimensionadas com base na largura, altura e proporção intrínsecas (real).

A propriedade background-size usa valores de porcentagem e comprimento de CSS ou palavras-chave específicas. A propriedade aceita até dois parâmetros correspondentes, para que você possa alterar a largura e a altura de um plano de fundo de forma independente.

A propriedade background-size aceita as seguintes palavras-chave:

• auto: quando usada de forma independente, a imagem de plano de fundo é dimensionada com base na largura e altura intrínsecas dela. Quando auto é usado com outro valor CSS para largura (primeiro parâmetro) ou altura (segundo parâmetro), a dimensão definida como auto é dimensionada conforme necessário para manter a proporção natural da imagem. Esse é o comportamento padrão da propriedade background-size.
• cover: abrange toda a área da camada de segundo plano. Isso pode significar que a imagem está esticada ou cortada.
• contain: dimensiona a imagem para preencher o espaço sem esticar ou cortar. Como resultado, pode permanecer um espaço vazio que fará com que a imagem seja repetida, a menos que background-repeat seja definido como no-repeat.

Os últimos dois são destinados para uso independente, sem outro parâmetro.

A demonstração a seguir mostra essas palavras-chave em ação:

Demonstração da aplicação dessas palavras-chave a background-size:

Anexo do plano de fundo

A propriedade background-attachment permite modificar o comportamento da posição fixa das imagens de plano de fundo (partes de imagens de uma camada de segundo plano) quando a camada fica visível em uma tela.

Ele aceita três palavras-chave: scroll, fixed e local.

O comportamento padrão da propriedade background-attachment é o valor inicial de scroll. Quando é necessário mais espaço, as imagens se movem com esse espaço dentro da camada de segundo plano determinada pelos limites da caixa CSS.

O uso do valor fixed corrige a posição das imagens de plano de fundo na janela de visualização.

Depois que o espaço das imagens da camada de segundo plano originalmente ocupa precisa ser rolado (ou renderizado) para fora da tela, as imagens da camada de segundo plano permanecem fixas na posição original, a camada de segundo plano as ativou até que toda a camada seja rolada para fora da tela pela janela de visualização.

A palavra-chave local permite que a posição das imagens de plano de fundo seja fixa em relação ao conteúdo do elemento. As imagens de plano de fundo agora se movem ao longo do espaço que ocupam à medida que esse espaço é renderizado dentro e fora dos limites da caixa CSS (geralmente devido a transformações de rolagem, 2D ou 3D).

Origem do plano de fundo

A propriedade background-origin permite que você modifique a área dos planos de fundo associadas a uma caixa específica. Os valores que a propriedade aceita correspondem às regiões border-box, padding-box e content-box de uma caixa .

Teste estas opções com a demonstração a seguir:

Clipe do plano de fundo

A propriedade background-clip controla o que é visto visualmente de uma camada em segundo plano, independentemente dos limites criados pela propriedade background-origin.

Assim como background-origin, as regiões que podem ser especificadas são border-box, padding-box e content-box, correspondentes ao local em que uma camada de segundo plano do CSS pode ser renderizada. Quando essas palavras-chave são usadas, qualquer renderização do plano de fundo além da região especificada é recortada ou cortada.

A propriedade background-clip também aceita uma palavra-chave text que corta o plano de fundo para não ultrapassar o texto na caixa de conteúdo. Para que esse efeito seja evidente no texto real de uma caixa CSS, o texto precisa ser parcial ou totalmente transparente.

No momento da publicação deste artigo, uma propriedade relativamente nova exige o uso do prefixo -webkit- no Chrome e na maioria dos navegadores.

Vários planos de fundo

Como mencionado no início do módulo, a camada de segundo plano permite a definição de várias subcamadas. Para facilitar, vou me referir a essas subcamadas como planos de fundo.

Vários planos de fundo são definidos de cima para baixo. O primeiro é o mais próximo do usuário, enquanto o último é o mais distante do usuário.

O navegador define a única camada de fundo final, ou seja, o único plano de fundo definido. Somente essa camada pode atribuir um background-color.

Várias camadas podem ser configuradas individualmente usando a maioria das propriedades CSS relacionadas ao segundo plano que são separadas por vírgula, conforme demonstrado no snippet de código e na demonstração ao vivo abaixo.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

A abreviação do plano de fundo

Para facilitar o estilo da camada de plano de fundo de uma caixa, principalmente quando várias camadas de plano de fundo são desejadas, há uma abreviação que segue este padrão específico:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

A ordem é importante na forma abreviada de declarar vários planos de fundo. Os valores de posição e tamanho precisam ser fornecidos, separados por uma barra (/). Declarar o comportamento da origem e do clipe na ordem correta permite que você defina palavras-chave válidas para ambos simultaneamente

A declaração a seguir corta o plano de fundo e a origina na caixa de conteúdo:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Com essa semântica abreviada em mente, as declarações anteriores relacionadas ao contexto do snippet de código podem ser reescritas para ficarem assim:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Teste seu conhecimento

Teste seus conhecimentos sobre os planos de fundo de CSS