#3.3 - Background com CSS - Guia para criação de themes
Apesar de ter ficado um tempo sem fazer os posts desta série, voltarei hoje com o Guia para criação de themes para Tumblr !
Nos tutoriais anteriores eu terminei todos as principais propriedades para personalização de texto com CSS, neste post falarei sobre a estilização do background/fundo de qualquer elemento com CSS !
Para se configurar o background (“fundo”) dos elementos em CSS, há diversas propriedades, cada uma edita um detalhe do background. Há uma para a cor, outra para uma possível imagem de fundo, outra que controla se o background se repetirá ou não e como ele se repetirá e se o fundo se moverá junto com a rolagem da página.
Cor do fundo
A propriedade para definir a cor do fundo de um elemento é background-color, esta propriedade pode receber uma cor CSS ou também o valor transparent, que fará com que o elemento terá o fundo transparente.
Imagem de fundo
Esta propriedade define a imagem que será usada de fundo do elemento. A propriedade deve ser usada da seguinte forma:
background-image: url(URL_DA_IMAGEM_DE_FUNDO);Repetição da imagem
A propriedade background-repeat diz se a imagem de fundo que você definiu irá se repetir, e como ela irá se repetir. Os possíveis valores para esta propriedade são: repeat (se repete horizontal e verticalmente), repeat-x (se repete horizontalmente), repeat-y (se repete verticalmente) e no-repeat (não irá se repitir). Veja um exemplo:
background-repeat: repeat-x;Posição da imagem
Você pode querer que nem toda a imagem de fundo seja exibida, ou que ela fique somente em determinada parte do elemento (por exemplo, no lado direito no meio, como alguns Tumblr costumam usar). Para isso, você usará a propriedade background-position, e ela recebe dois valores, o primeiro valor é a posição X (horizontal) e o outro a posição Y (vertical). Além de valores, você pode usar palavras que delimitam a posição da imagem. Se o valor for numérico, ele pode ser em porcentagem (%) ou em pixels (px), e os valores em palavra são os seguintes:
Veja um exemplo de uso desta propriedade:
background-position: center bottom;Movimentação do background
Esta propriedade, chamada background-attachment, define se o fundo irá se mover junto com a rolagem ou não. Se ela tiver o valor fixed, o fundo não se moverá, se tiver o valor scroll, ele se moverá.
As propriedades para fundo são estas. Desta forma, para fazer com que a <div> abaixo tenha um background azul, com uma imagem de fundo no canto superior direito, que não se repete e que não se move junto com a rolagem:
<div class="fundo_personalizado">
Conteúdo
</div>O código CSS seria:
div.fundo_personalizado {
background-color: #0000FF;
background-image: url(URL_DA_IMAGEM_DE_FUNDO);
background-position: left top;
background-attachment: fixed;
}Agora treine usando combinações desta propriedade com as outras que você já aprendeu ! =)
