Vamos estudar hoje a propriedade background do CSS. Abra um documento no bloco de notas do windows, ou um editor de textos simples ( não use o word pois li em alguns sites que não funciona) e salve seu documento como
estilo.
css. Este documento é o nossa folha de estilo que vamos inserir as formatações para nossa pagina Html como vimos na ultima aula.
A propriedade background define a cor de fundo de um elemento, uma imagem para fundo e ainda se essa imagem será ou não repetida horizontalmente ou verticalmente.
Para linkar sua página HTML na página CSS basta digitar o seguinte código no cabeçário (Head) da página HTML:
<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href = ” style / estilo. css” />
</head>
<body> |
Background-color
A cor de fundo em uma página é definida pela seguinte sitaxe:
background-color:propriedade
onde propriedade é igual a :
| #FFFFFF |
Código hexadecimal da cor |
| rgb(255,235,0) |
Código rgb |
| Red , blue, green |
Nome da cor |
| Transparent |
Tranparente |
È mais comum se utilizar o código hexadecimal das cores A tabela de cores em hexadecimal você pode ver neste site. Ao colocar na página basta digitar o código:
| body {
background-color:#6AAD6A
} |
e executar a página em html que a cor de fundo entrará automáticamente.
Background-image
Se você quiser por uma imagem de fundo a sintaxe é :
background-image: url (”caminho da imagem”);
Como no exemplo abaixo:
body {
background-image: url(”/images/tecs2.png”)
} |
Background-repeat
Usa-se para repetir ou não a imagem na tela de fundo. A sintaxe é :
background-repeat: propriedade;
onde propriedade é igual a :
| repeat |
repete a imagem por toda tela de fundo |
| repeat-y |
repete a imagem verticalmente |
| repeat-x |
repete a imagem horizontalmente |
| no-repeat |
não repete a imagem |
Exemplo:
body {
background-image: url(”/images/tecs2.png”);
background-repeat: repeat-x;
} |
Background-attachment
A propriedade background-attachment faz com que a imagem fique fixa na tela ou acompanhe a página conforme a barra de rolagem do navegador é utilizada.A sintaxe é:
background-attachment: propriedade;
onde a propriedade é igual:
| fixed |
fixa a imagem na página |
|
a imagem acompanha a barra de rolagem |
Exemplo:
body{
background-image:url”/images/tecs2.png”);background-repeat: no-repeat;
background-attachment: fixed;
} |
Background-position
A propriedade position da função background faz com que posicionemos esta imagem de fundo na página.Sua sintaxe é : background-position: propriedade onde propriedade é igual :
| x-pos y-pos |
coordenadas da posição |
| x-% y-% |
coordenada da posição na tela em porcentagem |
| top left |
imagem fica no topo a esquerda |
| top right |
a imagem fica no topo a direita |
| top center |
a imagem fica no topo no centro da página |
| center left |
a imagem fica no meio da página a esquerda |
| center center |
a imagem fica no meio da página no centro |
| center right |
a imagem fica no meio da página a direita |
| bottom left |
a imagem fica na esquerda no botton |
| botton center |
a imagem fica no centro no botton |
| botton right |
a imagen fica na direita no botton |
Exemplo;
| body {
background-image: url(”/images/tecs2.png”);
background-repeat: no-repeat;
background-position: 200px 70px;
} |
Utilizar todas a propriedades em uma única declaração.
Para se utilizar todas as propriedades deve se seguir a seguinte sitaxe:
background: color image repeat attachment position;
em qualquer ordem podendo omitir uma ou mais propriedades. Veja o exemplo:
| body {background: #00FF00 url(”tecs2.png”)
no-repeat fixed 200px 70px;
} |
Com o tempo vamos explorar mais a propriedade background. Pratique estas propriedades para se ambientar bem com elas pois são muito úteis.
Espero que tenham gostado !
Obrigado !
Refêrencias:
http://www.w3schools.com/css/
http://www.maujor.com/tutorial/backtut.php
http://www.pt-br.html.net/tutorials/css/lesson3.asp
