logo

TechCodeview

Plano de fundo CSS

A propriedade CSS background é usada para definir os efeitos de fundo no elemento. Existem 5 propriedades de fundo CSS que afetam os elementos HTML:

ipconfig para Ubuntu

  1. cor de fundo
  2. imagem de fundo
  3. fundo de repetição
  4. anexo de fundo
  5. posição de fundo

1) Cor de fundo CSS

A propriedade background-color é usada para especificar a cor de fundo do elemento.

Você pode definir a cor de fundo assim:

formato de string 
 h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p>
Teste agora

Saída:

Minha primeira página CSS.

Olá Javatpoint. Este é um exemplo de cor de fundo CSS.

2) Imagem de fundo CSS

A propriedade background-image é usada para definir uma imagem como plano de fundo de um elemento. Por padrão, a imagem cobre todo o elemento. Você pode definir a imagem de fundo para uma página como esta.

 body { background-image: url(&apos;paper1.webp&apos;); margin-left:100px; }
Teste agora

4) Anexo de plano de fundo CSS

A propriedade background-attachment é usada para especificar se a imagem de fundo é fixa ou rola com o resto da página na janela do navegador. Se você definir a imagem de fundo como fixa, a imagem não se moverá durante a rolagem no navegador. Vejamos um exemplo com imagem de fundo fixa.

pyspark 
 background: white url(&apos;bbb.webp&apos;); background-repeat: no-repeat; background-attachment: fixed;
Teste agora

5) Posição de fundo CSS

A propriedade background-position é usada para definir a posição inicial da imagem de fundo. Por padrão, a imagem de fundo é colocada no canto superior esquerdo da página da web.

Você pode definir as seguintes posições:

  1. Centro
  2. principal
  3. fundo
  4. esquerda
  5. certo
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center;
Teste agora