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:
- código hexadecimal: #FFFFFF
- código rgb: rgb(255,235,0)
- nome da cor: red, blue, green...etc
- transparente: transparent
- background-image:
- URL: url(caminho/imagem.gif)
- background-repeat:
- não repete: no-repeat
- repete vertical e horizontal: repeat
- repete vertical: repeat-y
- repete horizontal: repeat-x
- background-attachment:
- imagem fixa na tela: fixed
- imagem "rola" com a tela: scroll
- background-position:
- x-pos y-pos
- x-% y-%
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- 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.
01.
<
html
>
02.
<
head
>
03.
<
style
type
=
"text/css"
>
04.
body { background-image: url("/images/css.gif");}
05.
</
style
>
06.
</
head
>
07.
<
body
>
08.
</
body
>
09.
</
html
>
Este é o efeito da folha de estilo acima:Repetir verticalmente a imagem de fundo
01.
<
html
>
02.
<
head
>
03.
<
style
type
=
"text/css"
>
04.
body {
05.
background-image: url("/images/css.gif");
06.
background-repeat: repeat-y;
07.
}
08.
</
style
>
09.
</
head
>
10.
<
body
>
11.
</
body
>
12.
</
html
>
Repetir horizontalmente a imagem de fundo
01.
<
html
>
02.
<
head
>
03.
style type="text/css">
04.
body {
05.
background-image: url("/images/css.gif");
06.
background-repeat: repeat-x;
07.
}
08.
</
style
09.
</head>
10.
<
body
>
11.
</
body
>
12.
</
html
>
Este é o efeito da folha de estilo acima:
Posicionar uma imagem de fundo
01.
<
html
>
02.
<
head
>
03.
<
style
type
=
"text/css"
>
04.
body {
05.
background-image: url("/images/css.gif");
06.
background-repeat: no-repeat;
07.
background-position: 200px 70px;
08.
}
09.
</
style
>
10.
</
head
>
11.
<
body
>
12.
</
body
>
13.
</
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
01.
<
html
>
02.
<
head
>
03.
<
style
type
=
"text/css"
>
04.
body {
05.
background-image: url("/images/css.gif");
06.
background-repeat: no-repeat;
07.
background-attachment: fixed;
08.
}
09.
</
style
>
10.
</
head
>
11.
<
body
>
12.
</
body
>
13.
</
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:
em qualquer ordem, podendo ser omitido um mais valores.
background: color image repeat attachment position;
em qualquer ordem, podendo ser omitido um mais valores.
Veja o exemplo abaixo:
01.
<
html
>
02.
<
head
>>
03.
<
style
type
=
"text/css"
>/>
04.
body {
05.
background: #00FF00 url("css.gif")
06.
no-repeat fixed 200px 70px;
07.
}
08.
</
style
>
09.
</
head
>
Você poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos.
Nenhum comentário:
Postar um comentário