CSS – propriedade Background
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:
