nov200904

John Marques

0

Propriedade Background

Olá pessoal,

seguinte vou falar um pouco sobre a propriedade background da CSS, que tem como função define como vai ser o fundo de um elemento html, se vai ter imagem ou não, que cor vai ser, se vai se repetir e etc. Então vamos lá. ;D

background-color

Define a cor do fundo do elemento html, pode ser código hexadecimal (#FFFFFF), código rgb ( rgb(255,255,255) ), nome da cor (em inglês, red, blue, green), transparent (já o que vem por default, sem cor) e inherit (que herda a cor do elemento pai)

Exemplos:

/* Código Hexadecimal */
body {
background-color: #FF0000;
}

/* Código RGB */
body {
background-color: rgb(255,0,0);
}
/* Nome da Cor */
body {
background-color: red;
}

background-image

Define uma imagem para o fundo do elemento html basta colocar a url da imagem segue abaixo o exemplo.

body {
background-image: url( url_da_imagem );
}

background-repeat

Define a repetição do fundo, se vai haver repetição na horizontal e vertical (repeat) default, somente na horizontal (repeat-x), somente na vertical (repeat-y) ou se não irá repetir (no-repeat)

Exemplo

/*repete o preenchimento tanto em x como em y.<br>Imagine que você tem um pequena imagem que irá usar de fundo e quer que ela se multiplique tanto no eixo x como no eixo y.<br>basta colocar esse parametro abaixo ou não colocar por que o repeat já é default
*/
body {
background-repeat: repeat;
}
/* irá repetir somente no eixo X */
body {
background-repeat: repeat-x;
}
/* irá repetir somente no eixo Y */
body {
background-repeat: repeat-y;
}
/* Não irá repetir, irá somente exibir uma vez o fundo */
body {
background-repeat: no-repeat;
}

background-attachment

Define se o fundo vai ficar fixo ou se rola de acordo com a tela.

Exemplo:

/* o fundo fica fico */
body {
background-attachment: fixed;
}
/* rola com a tela */
body {
background-attachment: scroll;
/* é o padrão */
}

background-postion

Define o posicionamento do fundo, segue logo abaixo o tipo de posicionamento.

1. x-pos y-pos //posiciona em pixels
2. x-% y-% //posiciona em %
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

Exemplo:

body {
/* perceba que imagem irá se posicionar a 600px em X e 300px em Y, imagine que o canto esquerdo superior da sua tela é o ponto 0 tanto para x como para y. ai então você vai entender. */
background-image: url(url_da_imagem);
background-repeat: no-repeat;
background-position: 600px 300px;
}

background

esse é o que mais gosto por que é abreviação daquilo tudo escrito acima, ou seja, você definir o posicionamento, repetição, cor, imagem, ou se é fixo ou não em um única linha.

A regra funciona assim

background color image repeat attachment position

exemplo

body {
backgroud: #FFF url(url_da_imagem) no-repeat fixed 200px 200px;
}

não é necessário informar todos os parâmetros, você pode omitir os valores que desejar, exemplo quero somente a cor, então e só colocar “background: #FFF;” que equivale a um fundo branco, caso queira uma imagem e posicionamento, “background: url(url_da_imagem) no-repeat 200px 200px;” e pronto!

Pessoal espero que esse pequeno artigo sirva para auxílio,

Abraços,

John Marques