As imagens de fundo causam um grande impacto na aparência de qualquer site. Quando rolarmos uma página/conteúdo da web, qual será o comportamento da imagem de fundo? Se também se moverá com conteúdo ou não.

Bem! Por padrão, a imagem de fundo role com o conteúdo. A propriedade de atração de fundo é usada especificamente para determinar a resposta da imagem de fundo. Ele decide o comportamento da imagem de fundo usando os seguintes valores:

• fixo: Atribuir o valor fixo à imagem de fundo consertará a imagem na página da web.
• rolagem: O valor de rolagem permite que uma imagem role com o conteúdo.
• local: O valor local permite que uma imagem role com o conteúdo de um elemento.

Este artigo fornecerá uma compreensão detalhada da propriedade de atendimento de fundo no CSS. Para uma melhor compreensão, este artigo considerará alguns exemplos com diferentes valores de atendimento de fundo.

Sintaxe

O trecho abaixo descreve a sintaxe de propriedade de atitude de fundo

Antecipação de Antecedentes: Valor

Vamos discutir quais valores a propriedade de atendimento de fundo pode levar.

valor fixo

O "fixo" valor define a imagem para uma posição específica. A imagem não se moveria com o conteúdo.

Exemplo

O código abaixo do rico explicará como definir o fixo valor para a propriedade de atendimento de fundo

Html

Imagem de fundo: corrigido

Todo o conteúdo escrito aqui!

CSS

corpo
Imagem de fundo: URL ("Tampa.jpg ");
Repetição de fundo: sem repetição;
Posição de fundo: Top esquerda;
Antecipação de fundo: fixado;

O código acima gera a seguinte saída:

A saída esclarece que a imagem permanece fixa.

valor de rolagem

O "rolagem" O valor nos permite rolar a imagem com o conteúdo. Para uma melhor compreensão, considere o código abaixo:

Html

Imagem de fundo: rolagem

Todo o conteúdo escrito aqui!

CSS

corpo
Imagem de fundo: URL ("Tampa.jpg ");
Repetição de fundo: sem repetição;
Posição de fundo: Top esquerda;
Antecipação de fundo: rolagem;

O código acima produzirá a seguinte saída:

valor local

O valor local move a imagem com o conteúdo do elemento. No entanto, se você implementar o local no exemplo acima, o resultado parecerá o mesmo que o valor de rolagem. Então, como podemos diferenciar os valores locais e de rolagem?

A diferença entre os valores locais e de rolagem pode ser notada em um cenário em que existem várias áreas roláveis ​​em uma página da web.

Exemplo

Este exemplo fornecerá o código para o valor local para as múltiplas áreas roláveis.

Html

Antecedentes de imagem: Local

Todo o conteúdo vem aqui

CSS

.caixa

Largura: 500px;
Altura: 500px;
margem: 100px;
borda: 10px preto sólido;
Overflow: Auto;
Imagem de fundo: URL ("Tampa.jpg ");
Repetição de fundo: sem repetição;
Antecipação de Antecedentes: Local;

A saída do código indicado acima será assim:

Existem duas barras de rolagem na saída acima. Quando movemos qualquer barra de rolagem eu.e. interno ou externo A imagem se move com o conteúdo.

No código acima, use rolagem em vez de local e observe a diferença.

Rolagem CSS

Antecipação de fundo: rolagem;

A saída seguinte aparecerá para o valor de rolagem:

Existem duas barras de rolagem. Quando rolarmos a barra externa, a imagem se move com o conteúdo. E quando rolarmos a imagem da barra interna permaneceu fixa.

Conclusão

A propriedade de atração de fundo especifica como uma imagem de fundo se comportará. São necessários três valores, ou seja,. Corrigido, role, local. "fixo" Para consertar a imagem em uma posição específica, "rolagem" Para mover a imagem com conteúdo e "local" Para mover a imagem com o conteúdo do elemento.

Esta redação apresentou uma visão geral detalhada da propriedade de atendimento de fundo. Além disso, esta redação demonstrou como usar o valor fixo, rolagem e local para a propriedade de anexo.