Planos de fundo

The CSS Podcast - 053: Background

Atrás de cada caixa CSS há uma camada especializada chamada de camada de plano de fundo. O CSS oferece várias maneiras de fazer mudanças significativas, incluindo permitir vários planos de fundo.

As camadas de plano de fundo ficam mais distantes do usuário, renderizadas atrás do conteúdo de uma caixa, começando pela região padding-box. Isso permite que a camada de plano 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 elemento pai fique visível. Uma cor válida definida em uma camada de plano 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 de gradiente.

Como definir uma background-image com a função CSS url

Fundos em gradiente do CSS

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

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

Demonstração mostrando um 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 na horizontal e na vertical 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 é repetida no espaço disponível, sendo cortada conforme necessário.
• round: a imagem é repetida horizontal e verticalmente para caber no 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 de imagem.
• space: a imagem é repetida na horizontal e na vertical para caber o máximo de instâncias no espaço disponível sem recorte, espaçando as instâncias da imagem conforme necessário. As imagens repetidas tocam as 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 horizontal e vertical.

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

O valor repeat-x repete uma imagem apenas na horizontal, o que é equivalente a repeat no-repeat.

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

Posição do plano de fundo

Você pode ter notado que, quando algumas imagens na Web são estilizadas com uma declaração background-repeat: no-repeat, elas aparecem 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 mudar esse comportamento compensando a posição da imagem.

Assim como 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 comprimentos e porcentagens do CSS são usados, o primeiro parâmetro corresponde ao eixo horizontal, e o segundo, ao eixo vertical.

Quando as palavras-chave são usadas sozinhas, 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 aceitas pela propriedade background-position:

Além do formulário de dois parâmetros e do formulário de um parâmetro padrão, 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 do CSS precisa ser precedido pelas palavras-chave top, left, right ou bottom para que o navegador calcule de qual borda da caixa do CSS o deslocamento precisa ser originado.

Quando três parâmetros são usados, um comprimento ou valor CSS pode ser o segundo ou terceiro parâmetro, com os outros dois sendo palavras-chave. A palavra-chave que ele substitui será usada para determinar a borda que o comprimento ou valor 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 do CSS, a imagem será colocada na parte de cima da caixa. O valor 20% representa um deslocamento de 20% da esquerda da caixa (na direção x).

Se background-position: top 20% left for aplicado a uma imagem de plano de fundo do CSS, o valor de 20% representa um deslocamento de 20% da parte de cima da caixa do CSS (no eixo y), e a imagem é 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 background-image, ela será posicionada a 20% da parte de baixo e 30% da direita da caixa CSS.

A demonstração a seguir mostra esse comportamento:

Confira mais exemplos de uso da propriedade background-position com uma mistura de CSS e valores de palavras-chave:

Tamanho do plano de fundo

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

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

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

• auto: quando usado de forma independente, o tamanho da imagem de plano de fundo é definido com base na largura e na altura intrínsecas. Quando auto é usado com outro valor de CSS para a 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: cobre toda a área da camada de plano de fundo. Isso pode significar que a imagem foi redimensionada ou cortada.
• contain: dimensiona a imagem para preencher o espaço sem esticar ou cortar. Como resultado, o espaço vazio pode permanecer e fazer com que a imagem se repita, a menos que background-repeat seja definido como no-repeat.

Os dois últimos são usados de forma independente, sem outro parâmetro.

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

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

Acessório de segundo plano

A propriedade background-attachment permite modificar o comportamento de posição fixa das imagens de plano de fundo (parte das imagens de uma camada de plano de fundo) quando a camada está 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 dentro da camada de plano de fundo determinada pelos limites da caixa CSS.

O uso do valor fixed fixa a posição das imagens de plano de fundo na viewport.

Quando o espaço ocupado pelas imagens da camada de plano de fundo precisa ser rolado (ou renderizado) para fora da tela, as imagens na camada de plano de fundo permanecem fixadas na posição original que a camada de plano de fundo permitiu até que toda a camada seja rolada para fora da tela pela viewport.

A palavra-chave local permite que a posição das imagens de plano de fundo seja fixada 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 rolagem, transformações 2D ou 3D).

Origem do plano de fundo

A propriedade background-origin permite modificar a área de planos de fundo associada 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 estas opções usando a seguinte demonstração:

Clipe de plano de fundo

A propriedade background-clip controla o que é mostrado visualmente em uma camada de plano de fundo, 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 a onde uma camada de plano de fundo 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 é cortada ou aparada.

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

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

Vários planos de fundo

Como mencionado no início do módulo, a camada de segundo plano permite definir várias subcamadas. Para encurtar, vou me referir a essas subcamadas como 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 é o mais distante.

O único plano de fundo definido ou a última camada é designado como a camada de plano de fundo final pelo navegador. Somente 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írgulas, 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;

Abreviação de plano de fundo

Para facilitar o estilo da camada de plano de fundo de uma caixa, especialmente quando várias camadas de plano de fundo são necessárias, 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. Os valores de posição e tamanho precisam ser fornecidos, separados por um caractere barra (/). Declarar a origem e o comportamento do clipe na ordem correta permite que você aproveite as palavras-chave válidas para ambos simultaneamente.

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 essas abreviações em mente, as declarações anteriores relacionadas ao plano de fundo do snippet de código podem ser reescritas para:

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 do CSS