A propriedade background ~ .::Acessa Brasil::.

O fundo dos elementos HTML
A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.
As propriedades background são as listadas abaixo:

background-color............... cor do fundo;
background-image............. imagem de fundo;
background-repeat............. maneira como a imagem de fundo é
posicionada;
background-attachment.......se a imagem de fundo "rola" ou não
com a tela;
background-position............como e onde a imagem de fundo é
posicionada;
background........................maneira abreviada
para todas as propriedades;

Valores válidos para as propriedades do fundo

background-color:
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:
1. URL: url(caminho/imagem.gif)
background-repeat:
1. não repete: no-repeat
2. repete vertical e horizontal: repeat
3. repete vertical: repeat-y
4. repete horizontal: repeat-x
background-attachment:
1. imagem fixa na tela: fixed
2. imagem "rola" com a tela: scroll
background-position:
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

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.
Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.
A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

A cor do fundo

<html>
<head>
<style type="text/css">
<!--
body {background-color: #CCFFFF;} /*azul claro*/
h2 {background-color: #FF0000;}   /* vermelho */
p {background-color: #00FF00;}    /*  verde   */
-->
</style>
</head>
<body>
<h2>Estude CSS</h2>

<p>Com CSS você controla melhor seu layout</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Estude
CSS

Com CSS você controla melhor seu layout

A imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body { background-image: url("/images/css.gif");}
-->
</style>
</head>
<body>

</body>
</html>

Este é o efeito da folha de estilo acima:

Repetir verticalmente a imagem de fundo

<html>
<head>

<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: repeat-y;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Repetir horizontalmente a imagem
de fundo

<html>
<head>
style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: repeat-x;
}
-->
</style
</head>
<body>
</body>

</html>

Este é o efeito da folha de estilo acima:

Posicionar uma imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: no-repeat;
background-position: 200px 70px; 
}
-->

</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior

Ajustar uma imagem de fundo
fixa, que não "rola" com a tela.

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da aplicação das regras CSS acima em uma página web.

Todas as propriedades do fundo em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades do fundo.
Você pode declarar todas ou algumas das propriedades estudadas em uma regra única:
A sintaxe geral é esta:

background: color image repeat attachment position;

em qualquer ordem, podendo ser omitido um mais valores.
Veja o exemplo abaixo:

<html>
<head>>
<style type="text/css">/>
<!--
body { 
background: #00FF00 url("css.gif")
no-repeat fixed 200px 70px;
}
--> 
</style>
</head>

Você poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial

0 comentários:

Postar um comentário

Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).

quinta-feira, 18 de março de 2010