A propriedade CSS2.1 background

Nota: Este tutorial não aborda as funcionalidades das CSS3 para a propriedade background

Publicado em: 10/12/2003 | Atualizado em: 06/06/2014

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: #cff;} /*azul claro*/
	h2 {background-color: #f00;}   /* vermelho */
	p {background-color: #0f0;}    /*  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, nesta página interativa.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

comments powered by Disqus