Propriedades do fundo de Cascading Style Sheets (CSS)
Com folhas de estilo em cascata (CSS), você pode aplicar propriedades de fundo para um número de diferentes objetos em uma página web, incluindo a página inteira, uma camada particular, uma mesa, uma célula da tabela, e até mesmo texto.
cor de fundo: A cor de fundo pode ser aplicado à maioria dos objetos em uma página, incluindo texto, tabelas, células de tabelas, camadas, eo corpo de uma página usando um valor hexadecimal. Ao especificar cor hexadecimal para qualquer estilo, lembre-se de adicionar o símbolo de número (#) Antes de o valor hexadecimal, tal como no # CC9900, para obter melhores resultados de exibição browser.
p {background-color: # 33ff00-}imagem de fundo: Você pode aplicar imagens, tais como uma cor de fundo, o fundo de muitos objetos diferentes em uma página da web, incluindo o corpo de uma página, tabelas, células de tabelas e camadas. Você pode controlar como as telhas de imagem (repete) usando o repetir atributo.
.mylayer {background-image: url (images / car.gif) -}fundo de repetição: O repetir atributo indica um navegador como a imagem de fundo deve ser repetido na área que está enchendo. Por padrão, e salvo indicação em contrário, todos os fundos serão telha vertical e horizontalmente para preencher todo o espaço da tag ou objeto denominou o fundo.
body {background-image: url (images / zigzag.gif) -background-repeat: repeat-x-}o repetir atributo tem quatro variáveis:
repetir: Esta opção é o mesmo que a configuração padrão para imagens de fundo e telhas a imagem de fundo horizontalmente e verticalmente.
repetir-X: Use esta opção quando desejar que a imagem de fundo a telha apenas ao longo do eixo horizontal. Se desejado, usá-lo em conjugação com a horizontal e / ou vertical background-position atributo.
repetir-y: Use esta opção quando desejar que a imagem de fundo a telha apenas ao longo do eixo vertical. Se desejado, usá-lo em conjugação com a horizontal e / ou vertical background-position atributo.
no-repeat: Essa definição exibe a imagem de fundo como uma única imagem estática sem repetir em qualquer direção.
background-attachment: Este atributo refere-se à forma como a imagem de fundo interage com o conteúdo acima dela. A imagem de fundo pode se comportar de três maneiras diferentes - rolagem, fixo, e herdar - mas não todos os três são consistentemente apoiado por todos os navegadores, então não se esqueça de testar qualquer opção selecionada em uma variedade de navegadores e versões de navegadores em plataformas Mac e PC.
body {background-image: url (images / biodiesel.gif) -background-attachment:-background-repeat fixo: repetir-y}Aqui está uma explicação sobre os diferentes estilos de vinculação de fundo:
rolagem: Esta é a opção padrão para a forma como a imagem de fundo é anexado à página, que funciona da mesma forma se o atributo é especificado ou não especificado na CSS. Com esta opção, a imagem rola fundo, juntamente com qualquer texto e outros objetos na página.
fixo: O fixo atributo mantém a imagem de fundo fixa para a janela do navegador enquanto o texto e outros objetos na página rolar passado.
herdar: Quando você especificar esta opção, a imagem de fundo herda a regra de anexo, se rolagem ou fixo, de seu recipiente pai, como com uma célula de tabela dentro de uma tabela.
background-position (X): Defina a horizontal background-position atributo para controlar onde na janela do navegador exibe a imagem de fundo e repetições. Escolher esquerda, centro, ou certo ou digite qualquer valor px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (percentagem).
p {background-image: url (images / recycle.gif) -background-repeat: repeat-x-background-position: left;}background-position (Y): Defina a vertical background-position atributo para controlar onde na janela do navegador exibe a imagem de fundo e repetições. Escolher topo, centro, ou inferior ou digite qualquer valor px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (percentagem).
p {background-image: url (images / gogreen.png) -background-repeat: repeat-y-background-position: centro-}Quando ambas as posições de fundo horizontal e vertical precisa ser especificado no CSS, incluí-los em conjunto separado por um espaço:
p {background-image: url (images / earthsafe.jpg) -background-repeat: repeat-x-background-position: centro-esquerda}A posição horizontal precede sempre a posição vertical quando os dois são combinados. Se essa ordem não for seguida, o elemento não pode processar corretamente, resultando em problemas de exibição inesperados quando visto em diferentes navegadores.