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

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

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 específica 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

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 deixá-lo dessa forma, está bem legal.

Receitas CSS Background

See the Pen
Receitas 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?