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

Recomendados para você

Microsoft 50 Anos - Prompts Inteligentes

Microsoft 50 Anos - Computação em Nuvem com Azure

Comentários (3)

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 - 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 - 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 ?

Leia a seguir

Vamos fazer uma Calculadora em JavaScript?Marcelo Neves - 05 de Maio

#HTML#CSS#JavaScript

Lógica de Programação: Básico, Mas Só Que Não...Marcelo Neves - 04 de Maio

#PHP#HTML#TypeScript#MySQL#Bootstrap#CSS#JavaScript

Entendendo os Seletores no CSS: Guia Completo com ExemplosMarcelo Neves - 02 de Maio

#HTML#CSS