CSS Background: Estilizando o Fundo dos seus Websites

Tempo de leitura: 3 minutos

Olá Desenvolvedor, tudo tranquilo? Hoje falaremos sobre algo que é fundamental em qualquer Website, que é a sua parte estética, feita especificamente pelo CSS, e faremos um pequeno resumo do CSS Background que é uma propriedade indispensável em qualquer tipo de projeto web.

O que iremos aprender hoje em nosso artigo?

// Como funciona a propriedade CSS Background

// Composição do Background

// Como trabalhar com vários Backgrounds

// Receitas CSS Background

Como funciona a propriedade CSS Background

Como funciona a propriedade CSS Background

A propriedade CSS background lhe permitirá controlar o plano de fundo de qualquer elemento (o que é exibido atras do conteúdo desse elemento).

É uma propriedade abreviada, o que significa que permite escrever o que seriam várias propriedades CSS em uma. Como isso:

body { 
background: 
    url(dankitexture.jpg)               /* image */ 
    top center / 200px 200px            /* position / size */ 
    no-repeat                           /* repeat */ 
    fixed                               /* attachment */ 
    padding-box                         /* origin */ 
    content-box                         /* clip */ 
    red;                                /* color */
}

Composição do Background

composição do background

O background é composto por outras oito propriedades:

  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • background-color

Você pode usar qualquer combinação dessas propriedades, em quase qualquer ordem (embora a ordem recomendada nas especificações esteja acima).

No entanto, existe uma pegadinha: qualquer coisa que você não especifica na propriedade background é automaticamente estabelecida como padrão. Então, se você fizer algo assim:

body  { 
background-color: red;
background: url(dankitexture.jpg);
}

Em vez de um fundo vermelho, ele será transparente. A correção é fácil: basta definir background-color depois do background ou usar a abreviação (por exemplo background: url(...) red;)

Como trabalhar com vários Backgrounds

como trabalhar com vários backgrounds

No CSS3 foi adicionado suporte a vários backgrounds que se sobrepõem. Qualquer propriedade relacionada a planos de fundo pode ter uma lista separada por vírgula, desta forma:

body {
background: url(dankitexture.jpg), url(texture2.jpg) black;
background-repeat: repeat-x, no-repeat;
}

Cada valor na lista separada por vírgula corresponde a uma camada: o primeiro valor é a camada superior, o segundo valor é a segunda camada e a cor do background é sempre a última camada.

Agora você verá algumas receitas de css background para entender na prática como funciona.

Basta você clicar na caixa correspondente ao CSS que deseja aprender e logo abaixo será exibido o código responsável por deixa-lo dessa forma, está bem legal.

Receitas CSS Background

See the Pen
Receitas CSS Background

Conclusão de CSS Background

conclusão de css background

Hoje falamos basicamente sobre como você pode aplicar o CSS background de uma forma eficaz mas sem se aprofundar em cada propriedade.

Porém pode ficar tranquilo pois vamos falar em artigos individuais sobre cada uma das propriedades do CSS Background e como você pode trabalhar cada uma delas da melhor maneira possível.

Deseja aprender a construir aplicações Web completas com alguém que irá te acompanhar de perto em todo processo?

O próximo passo para você é colocar a mão na massa comigo em projetos reais, pois além de muitos anos no mercado de desenvolvimento Web, sou professor com vasta experiência para te conduzir nesta jornada e tirar todas as suas dúvidas.

E não sou eu que digo, são os mais de 14.000 alunos capacitados por mim na Danki Code, por isso sei bem do que eu estou falando.

E uma excelente forma de você começar a desenvolver projetos reais comigo é adquirindo o Pacote Full-Stack. Nele você aprenderá desde o básico HTML até construir os projetos mais incríveis e cobiçados do mercado.