Planos de fundo

Podcast do CSS - 053: contexto

Planos de fundo

Por trás de cada caixa do CSS há uma camada especializada chamada camada de segundo plano. O CSS oferece várias maneiras de fazer alterações significativas nele, incluindo a permissão de vários planos de fundo.

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

Cor do plano de fundo

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

Imagens de plano de fundo

Na camada background-color, é possível adicionar uma imagem de plano de fundo usando a propriedade background-image. 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 gradiente.

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

Planos de fundo em gradiente de CSS

Existem várias funções CSS de gradiente para permitir que você gere uma imagem de plano de fundo quando duas ou mais cores são transmitidas.

Independentemente de qual função de gradiente for usada, a imagem resultante será dimensionada de forma intrínseca para corresponder à quantidade de espaço disponível.

Demonstração com exemplo de aplicação de uma imagem de plano de fundo usando funções de 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.

Mude isso usando 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 é repetida horizontalmente e verticalmente para encaixar o máximo de instâncias no espaço disponível. À medida que o espaço disponível aumenta, a imagem é esticada e, depois de esticar metade da largura original, é compactada para adicionar mais instâncias.
• space: a imagem é repetida horizontalmente e verticalmente para encaixar o máximo de instâncias no espaço disponível sem corte, espaçando as instâncias da imagem conforme necessário. Imagens repetidas tocam nas bordas do espaço ocupado por uma camada de plano de fundo, com espaço em branco distribuído uniformemente entre elas.

A propriedade background-repeat permite definir o comportamento dos eixos x e y de forma 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 horizontais e verticais.

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

O valor repeat-x repete uma imagem somente horizontalmente. será equivalente a repeat no-repeat.

A demonstração abaixo demonstra os recursos da propriedade background-repeat:

Posição em segundo plano

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 é no canto superior esquerdo. A propriedade background-position permite alterar esse comportamento deslocando a posição da imagem.

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

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

Quando as palavras-chave são usadas, 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 para 50%. Veja um exemplo que demonstra isso usando as palavras-chave que a propriedade background-position aceita:

Além de seu formato padrão de dois parâmetros e um formato de parâmetro; a propriedade background-position também aceita até quatro parâmetros.

Quando três ou quatro parâmetros são usados, um comprimento ou 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 ser originado.

Quando três parâmetros são usados, um comprimento ou valor de CSS pode ser o segundo ou o terceiro parâmetro, sendo que os outros dois são palavras-chave. a palavra-chave que tiver êxito será usada para determinar a borda da qual o comprimento ou valor CSS corresponde ao deslocamento. O deslocamento da outra palavra-chave especificada é definido como zero.

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 será colocada na parte superior da caixa. O valor 20% representará um deslocamento de 20% a partir da esquerda 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% em relação à parte superior da caixa do 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 emparelhadas 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% à direita da caixa CSS.

A demonstração a seguir demonstra esse comportamento:

Confira 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 (reais).

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, permitindo que você altere a largura e a altura de um segundo plano 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. quando auto é usada com outro valor CSS para a largura (primeiro parâmetro) ou a 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 haver espaço vazio que fará a imagem se repetir, a menos que background-repeat esteja definido como no-repeat.

Os dois últimos são usados de maneira 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 em segundo plano

A propriedade background-attachment permite modificar o comportamento da posição fixa das imagens de plano de fundo (as imagens fazem parte de uma camada de segundo plano) quando a camada fica visível na 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 mais espaço é necessário, as imagens se movem com esse espaço na camada de fundo 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 plano de fundo ocupa originalmente precisa ser rolado (ou renderizado) para fora da tela, as imagens na camada de plano de fundo permanecem fixas na posição original. A camada de plano de fundo permitiu que elas ficassem até que toda a camada fosse 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 enquanto esse espaço é renderizado dentro e fora dos limites da caixa CSS (geralmente devido a rolagem, transformações 2D ou 3D).

Origem em segundo plano

A propriedade background-origin permite modificar a área dos planos de fundo associados a uma caixa específica. Os valores aceitos pela propriedade correspondem às regiões border-box, padding-box e content-box de uma caixa .

Teste essas opções usando a seguinte demonstração:

Clipe em segundo plano

A propriedade background-clip controla o que é visto visualmente de uma camada de 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 de CSS pode ser renderizada. Quando essas palavras-chave são usadas, qualquer renderização do plano de fundo que esteja além da região especificada será cortada ou recortada.

A propriedade background-clip também aceita uma palavra-chave text que recorta o plano de fundo para que fique a uma distância máxima do texto na caixa de conteúdo. Para que esse efeito seja evidente no texto real dentro de uma caixa CSS, o texto precisa ser parcial ou completamente transparente.

No momento em que este artigo foi escrito, o Chrome e a maioria dos navegadores exigem o prefixo -webkit- para usar uma propriedade relativamente nova.

Vários planos de fundo

Como mencionado no início do módulo, a camada de segundo plano permite definir várias subcamadas. Em resumo, chamarei essas subcamadas de planos de fundo.

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

O único plano de fundo definido ou a última camada é designado como a camada de plano de fundo final pelo navegador. Apenas essa camada pode atribuir um background-color.

Várias camadas podem ser configuradas individualmente usando a maioria das propriedades CSS relacionadas ao plano de fundo separadas por vírgula, como 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 segundo plano de uma caixa, especialmente quando várias camadas são desejadas, há uma abreviação que segue o seguinte 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. É preciso fornecer os valores de posição e tamanho separados por uma barra (/). Declarar a origem e o comportamento do clipe na ordem correta permite definir palavras-chave válidas para ambos ao mesmo tempo.

A declaração a seguir recorta o plano de fundo e o origina da 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 plano de fundo do snippet de código poderiam ser reescritas da seguinte forma:

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 planos de fundo CSS