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. Quandoauto
é usado com outro valor de CSS para a largura (primeiro parâmetro) ou altura (segundo parâmetro), a dimensão definida comoauto
é dimensionada conforme necessário para manter a proporção natural da imagem. Esse é o comportamento padrão da propriedadebackground-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 quebackground-repeat
seja definido comono-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
As imagens de plano de fundo são posicionadas no canto superior esquerdo de uma caixa CSS.
As imagens de plano de fundo são repetidas por padrão.
Quais das seguintes declarações de background-position
são válidas?
background-position: top right 33%
background-position: 50% left
background-position: right bottom
background-position: left
Para definir uma imagem de plano de fundo fixa em uma viewport, use:
background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll
background-attachment: fixed
A origem de plano de fundo padrão de um plano de fundo em uma caixa CSS é:
margin-box
border-box
padding-box
content-box