Agradecemos por acompanhar o Google I/O. Assista ao conteúdo sob demanda.

Esta página foi traduzida pela API Cloud Translation.

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

Browser Support

Source

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

Browser Support

Source

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

Browser Support

Source

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

Browser Support

Source

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:

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

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 de comprimento do 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 de comprimento do 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 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

Browser Support

Source

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

Browser Support

Source

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

Browser Support

Source

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

Browser Support

Source

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.

Browser Support

Source

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

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.

Verdadeiro

Correto!

Falso

Dependendo do tamanho intrínseco, uma imagem pode não estar posicionada no canto superior esquerdo de uma caixa CSS. O background-position precisa ser usado explicitamente para mudar a posição padrão de uma imagem de plano de fundo.

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

Falso

O 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 repetições no eixo específico.

Verdadeiro

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: 50% left

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

background-position: top right 33%

Isso posiciona uma imagem de plano de fundo na parte de cima de uma caixa e a 33% da borda direita da caixa.

background-position: right bottom

Isso posiciona uma imagem de plano de fundo à direita e na parte de baixo de uma caixa. A posição de eixos diferentes pode ser nomeada em qualquer ordem.

background-position: left

Isso posiciona uma imagem de plano de fundo à esquerda da caixa e centralizado verticalmente. Quando apenas uma posição de um eixo é fornecida, a imagem de plano de fundo é centralizada no eixo oposto.

Para definir uma imagem de plano de fundo fixa em uma viewport, use:

background-position: fixed

"Esse é um 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 para ser fixada na viewport atual.

background-attachment: scroll

"background-attachment é a propriedade que você precisa usar para definir uma imagem de plano de fundo fixa em uma viewport. No entanto, scroll é o valor padrão da propriedade que fixa a imagem de plano de fundo na caixa sem ser afetada pelo conteúdo dentro dela."

A origem de plano de fundo 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

Valor válido para background-origin, e as bordas pré-organizadas podem ser pintadas sobre os planos de fundo, mas não sã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 CSS, é um valor inválido para a propriedade background-origin.

Planos de fundo

The CSS Podcast - 053: Background

Cor do plano de fundo

Imagens de plano de fundo

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

Fundos em gradiente do CSS

Repetição de imagens de plano de fundo

Posição do plano de fundo

Tamanho do plano de fundo

Acessório de segundo plano

Origem do plano de fundo

Clipe de plano de fundo

Vários planos de fundo

Abreviação de plano de fundo

Teste seu conhecimento

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