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

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

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

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

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

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

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

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

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:

O que fazer

background-position: left 50%;

O que fazer

background-position: top left;

O que fazer

background-position: left top;

A ordem não importa para palavras-chave associadas a diferentes eixos de posição.

O que não fazer

  background-position: 50% left;

Quando os valores CSS são usados com palavras-chave, a ordem é importante. O primeiro valor representa o eixo horizontal e o segundo o eixo vertical.

O que não fazer

  background-position: left right;

Não é possível usar palavras-chave associadas ao mesmo eixo simultaneamente.

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.

O que fazer

background-position: bottom 88% right;

O que fazer

background-position: right bottom 88%;

O que não fazer

background-position: 88% bottom right;

O valor do tamanho de CSS precisa ser precedido pelas palavras-chave top, right, bottom ou left ao usar três ou mais parâmetros.

O que fazer

background-position: bottom 88% right 33%;

O que fazer

background-position: right 33% bottom 88%;

O que não fazer

background-position: 88% 33% bottom left;

O valor do comprimento de CSS precisa ser precedido pelas palavras-chave top, right, bottom ou left ao usar três ou mais parâmetros.

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:

Observação : para saber mais sobre as nuances relacionadas ao posicionamento dos planos de fundo, confira background-position no MDN.

Tamanho do plano de fundo

Compatibilidade com navegadores

• 3
• 12
• 4
• 5

Origem

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

Compatibilidade com navegadores

• 1
• 12
• 1
• 1

Origem

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

Compatibilidade com navegadores

• 1
• 12
• 4
• 3

Origem

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

Compatibilidade com navegadores

• 1
• 12
• 4
• 5

Origem

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.

Compatibilidade com navegadores

• 1
• 12
• 4
• 5

Origem

.

Observação : essa propriedade não é compatível com background-clip: text sendo definido simultaneamente em uma caixa de CSS.

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.

Observação : considerando a imprevisibilidade da Web, uma imagem de plano de fundo pode não ser carregada. Definir uma cor de segundo plano na camada final garante um bom contraste para o texto e assim por diante, caso as camadas de segundo plano importantes não sejam carregadas.

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>?

: é importante observar que todas as propriedades de segundo plano omitidas na abreviação são definidas com seus valores iniciais.

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

As imagens de plano de fundo são posicionadas na parte superior esquerda de uma caixa de CSS.

Verdadeiro

Correto!

Falso

Dependendo do tamanho intrínseco, uma imagem pode parecer não estar posicionada no canto superior esquerdo de uma caixa de CSS, é necessário usar background-position explicitamente para mudar a posição padrão de uma imagem de plano de fundo.

As imagens de plano de fundo não são repetidas por padrão.

Falso

background-repeat: no-repeat precisa ser usado explicitamente para não repetir uma imagem de plano de fundo. Além disso, background-repeat: repeat-x e background-repeat: repeat-y podem ser usados para evitar a repetição no eixo específico.

Verdadeiro

Correto!

Quais das declarações de background-position a seguir são válidas?

background-position: 50% left

Quando os valores CSS são usados com palavras-chave, a ordem deles é importante.

background-position: top right 33%

Isso posiciona uma imagem de plano de fundo no topo de uma caixa e 33% a partir da borda direita da caixa.

background-position: right bottom

Isso posiciona uma imagem de plano de fundo à direita e na parte inferior de uma caixa. As posições de eixos diferentes podem ser nomeadas em qualquer ordem.

background-position: left

Isso posiciona a imagem de plano de fundo no lado esquerdo da caixa e centralizada verticalmente. Quando apenas uma posição do eixo é fornecida, a imagem de plano de fundo é centralizada no eixo oposto.

Para definir que uma imagem de plano de fundo seja fixada em uma janela de visualização, use:

background-position: fixed

"Esse valor é inválido para a propriedade background-position."

background-fixed-to-viewport: true

background-fixed-to-viewport ainda não existe no CSS.

background-attachment: fixed

background-attachment: fixed define explicitamente a imagem de plano de fundo que será fixada na janela de visualização atual.

background-attachment: scroll

background-attachment é a propriedade a ser usada para definir uma imagem de plano de fundo a ser fixada em uma janela de visualização. No entanto, scroll é o valor padrão para a propriedade que corrige a imagem de plano de fundo por padrão para a caixa não afetada pelo conteúdo dentro dela.

A origem padrão de um plano de fundo em uma caixa CSS é:

content-box

Valor válido para background-origin, mas não é o padrão.

border-box

É um valor válido para background-origin, e as bordas pré-organizadas podem ser pintadas sobre planos de fundo, mas esse não é o padrão.

padding-box

O valor padrão de background-origin. Permite que o plano de fundo seja renderizado além do conteúdo e até a borda de uma caixa.

margin-box

Embora seja uma região reconhecida de uma caixa do CSS, o valor é inválido para a propriedade background-origin.