SdevLab – Tutorial | CSS Background

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Background

Background define as características do fundo dos elementos HTML. É mais comumente usada em fundos de página ou tabelas, mas pode ser aplicada em outros elementos. Segue a lista de propriedades:

Propriedade Descrição Opções
background-color cor do fundo
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green…etc
  4. transparente: transparent
background-image imagem de fundo URL: url(“caminho/imagem.gif”)
background-repeat maneira como a imagem de fundo é posicionada
  1. não repete: no-repeat
  2. repete vertical e horizontal: repeat
  3. repete vertical: repeat-y
  4. repete horizontal: repeat-x
background-attachment se a imagem de fundo “rola” ou não com a tela
  1. imagem fixa na tela: fixed
  2. imagem “rola” com a tela: scroll
background-position como e onde a imagem de fundo é posicionada
  1. x-pos y-pos
  2. x-% y-%
  3. top left
  4. top center
  5. top right
  6. center left
  7. center center
  8. center right
  9. bottom left
  10. bottom center
  11. bottom right

Siga o modelo abaixo para testar as propriedades (desta vez não comentarei nenhuma em especial porque elas são auto-explicativas):

<html> 
<head> 
<style type="text/css"> 
<!-- body {background-color: #CCFFFF;} /*azul claro*/ --> 
</style> 
<title>Teste 9</title> 
</head> 
<body> 
<p>Perceba que mesmo sem alterar a cor do fundo na tag body, 
o nosso fundo mudou de cor porque assim definimos no estilo da página.
</p> 
</body> 
</html>

A sintaxe para declarar uma só regra com todos os atributos é mostrada abaixo:

background: color image repeat attachment position; 

Neste caso qualquer ordem pode ser utilizada, e um ou mais atributos pode ser omitido.

Até a próxima!
xD

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS Background

  1. Pingback: Tutorial CSS básico – List « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s