Article image
Raja Novaes
Raja Novaes11/06/2022 11:06
Compartilhe

Resumo de todas as propriedades de plano de fundo no CSS

  • #CSS

O famoso background no CSS permite que alterações sejam realizadas no plano de fundo dos elementos. 

  • background - Define todas as propriedades do plano de fundo em uma declaração.
  • background-attachment -  Define se uma imagem de fundo é fixa ou rola com o resto da página. 
  • background-clip - Especifica a área de pintura do plano de fundo.
  • background-color - Define a cor de fundo de um elemento.
  • background-image - Define a imagem de fundo para um elemento.
  • background-origin - Específica onde a(s) imagem(ns) de fundo está(ão) posicionada(s).
  • background-position - Define a posição inicial de uma imagem de fundo. 
  • background-repeat - Define como uma imagem de fundo será repetida.
  • background-size - Especifica o tamanho das imagens de fundo.

Qual dessas você mais usa? Deixe sua resposta nos comentários!

Compartilhe
Comentários (3)
Raja Novaes
Raja Novaes - 13/06/2022 23:27

Camila,


Pesquisando um pouco mais sobre sua dúvida consegui esses valores para a propriedade background-size.


Com a propriedade background-size é possível alterar o tamanho das imagens de fundo. Existem outros dois valores que podem alterar o tamanho do plano de fundo são contain (dimensiona a imagem de fundo para ser o maior possível) e cover (dimensiona a imagem de fundo para que a área de conteúdo seja completamente coberta pela imagem de fundo).  



Raja Novaes
Raja Novaes - 11/06/2022 11:27

Oi, Camila.


Pelo background-attachment é possível definir se uma imagem será fixa ou se irá rolar via Scroll.


"Ainda é possível se a imagem pode ser uma fixa ou se poderá rola com o resto da página. Esse valor será aplicado pela propriedade background-attachment.


Exemplo de Alteração do Plano de Fundo - Fixação da imagem

body {

  background-image: url(“papel.png”);

    background-repeat: no-repeat;

    background-position: right-top; 

    background-attachment: fixed;

}

Outro valor aplicado nesta propriedade é o scroll.


Para definir o tamanho da imagem você deve usar background-size.


Espero ter ajudado e boa sorte no seu trabalho.

Camila Lima
Camila Lima - 11/06/2022 11:21

Oiee, o background-attachment após eu colocar uma imagem, é por ele então que defino o tamanho dela?

Estou perguntando isso porque estou arrumando um projeto da minha faculdade (que meu grupo quer levar como tcc tbm) e na parte do fale conosco pensei em colocar uma imagem atrás do formulário, com esse background-attachment então, consigo definir o tamanho da imagem ?