HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Plano de fundo

Fundo dos elementos - Propriedade background

A propriedade background permite controlar a cor de fundo de um elemento, usar uma imagem como fundo, repetir a imagem de fundo verticalmente e horizontalmente, posicionar a imagem dentro da página.

Mostrar exemplos

background-color - define a cor de fundo de um elemento.
Sintaxe: background-color: valor
Valores válidos
Exemplos:
body { background-color: yellow }
p      { background-color: rgb(201,202,203) }
h1    { background-color: #00FF00 }
h2    { background-color: transparent }
textarea {background-color: aliceblue }
Visualizar

background-image - define uma imagem de fundo na página, parágrafo ou texto.
Sintaxe: background-image:url(endereço do arquivo de imagem)
Exemplos:
body { background-image:url(itafun.jpg) }
table { background-image:url(tecn.gif) }
p      { background-image:url(img1.gif) }
Visualizar

background-attachment - determina se a imagem de fundo deve permanecer fixa na janela do navegador ou se rola com o conteúdo.
Valores:
fixed - fixa a imagem de fundo
scroll - acompanha o conteúdo quando rolamos a janela
Sintaxe: background-image:url(endereço do arquivo de imagem); background-attachment: valor
Exemplos:
body      { background-image: url(imagem.jpg); background-attachment: fixed }
textarea {background-image:url(maraa.jpg); background-attachment: fixed }
Visualizar

background-repeat - estabelece se a imagem deverá ser repetida e em qual direção.
Valores:
no-repeat  - a imagem é posicionada no canto superior esquerdo.
repeat-x  - a imagem irá se repetir na horizontal.
repeat-y  - a imagem irá se repetir na vertical.
Sintaxe: background-image:url(endereço do arquivo de imagem); background-repeat: valor
Exemplos
body      { background-image:url(br_flag.gif); background-repeat: repeat-x }
table      { background-image:url(son.jpg); background-repeat: no-repeat }
textarea {background-image:url(itafun.jpeg); background-repeat: repeat-y }
Visualizar

background-position - determina uma posição onde a imagem de fundo deve aparecer.
Valores:
top left  - topo e esquerda
top center  - topo e centro
top right  - topo e direita
center left  - centro e esquerda
center center  - centro e centro
center right  - centro e direita
bottom left  - pé e esquerda
bottom center  - pé e centro
bottom right  - pé e direita
Se omitir os dois valores a imagem será posicionada no canto superior esquerdo, e caso se omita apenas um valor o outro será definido por padrão como center
x% y%  - horizontal e vertical em percentagem. 0% 0% corresponde ao canto superior esquerdo e 100% 100%
ao canto inferior direito
x y  - horizontal e vertical em pixels (px) ou outra medida definida em CSS.
Em qualquer caso os valores devem ser separados por um espaço.
É permitido misturar posições absolutas com percentuais. Se definir apenas um valor o navegador definirá o outro em 50%.

Sintaxe: background-image:url(endereço do arquivo de imagem); background-repeat: no-repeat; background-position: valor valor
Exemplos:
body { background-image:url(br_flag.gif); background-repeat: no-repeat; background-position: bottom right }
table { background-image:url(son.jpg); background-repeat: no-repeat; background-position: 20 100 }
textarea { background-image:url(itafun.jpeg); background-repeat: no-repeat; background-position: 30% 100 }
Visualizar
É obvio que está propriedade deve ser declarada juntamente com background-repeat: no-repeat.
Também é possível um dos seguintes casos:
repetir horizontalmente e posicionar na vertical
ou repetir na vertical e posicionar na horizontal.

background
Permite escrever de forma abreviada numa só declaração todos os parâmetros relativos ao fundo de um elemento.
Exemplo:
body { background: #ece8d9 url(son.jpg) no-repeat fixed center 90% }