Conhecendo o CSS - Fixando e Rolando imagens de fundo

Você pode ter uma imagem de fundo fixa na tela de seu navegador ou permitir que ela role com o documento. Isso é feito usando-se a propriedade background-attachment com um dos seguintes valores: fixed ou scroll.
Normalmente, este comando é usado tanto para o corpo inteiro como para áreas de conteúdo dentro do documento. No entanto, como você viu até agora, você pode usá-lo em qualquer elemento que faz sentido fazê-lo.
Ex.:
body {
           background-image: url(head.gif);
           background-position: right;
           background-repeat: no-repeat;
           background-attachment: scroll;
         }

Ver mais

Conhecendo o CSS - Posicionando a imagem de Fundo

Você pode posicionar uma imagem de fundo no documento ou qualquer elemento que quiser. Primeiramente deve-se definir as propriedades background-repeat com o valor no-repeat. Então você pode posicionar usando qualquer um dos valores descritos na tabela abaixo:

Obs.:Você pode combinar valores de porcentagem com os outros valores numéricos no background-position, com exceção de palavras. Assim pode-se ter valores como 80% 50px mas não como 100% left.
Se somente um valor de porcentagem ou comprimento for dado, ele será aplicado somente a posição horizontal, e a vertical ficará com seu valor padrão de 50%.

Exemplo:
h1 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: 0% 0%;
      }

h2 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: 100px 4px;
     }

h3 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: bottom right;
      }

Observe que nesse exemplo já ajustou-se não só a imagem, mas também o valor de norepeat para garantir que a posição da imagem de fundo e seus valores funcionem corretamente.

Ver mais

Conhecendo o CSS - Imagens ao longo do eixo vertical

O eixo vertical ou y, é usado para que a imagem se repita ao longo do eixo vertical usando a propriedade background-repeat com o valor de repeat-y:

body {
           background-image: url(imagem_que_você_quer_usar.jpg);
           background-repeat: repeat-y;
          }

Você também pode não querer repetir as imagens, então use o valor no-repeat:

body {
          background-image: url(imagem_que_você_quer_usar.jpg);
          background-repeat: no-repeat;
          }

Isto mostrará a imagem aparecendo no canto superior esquerdo uma vez, sem repetir. ;)

Ver mais

Conhecendo o CSS - Imagens ao longo do eixo horizontal

CSS lhe permite controlar a orientação e modo como a imagem irá se comportar. Isto é feito usando o background-repeat juntamente com o valor apropriado.

O eixo horizontal ou x, é usado para que a imagem se repita ao longo do eixo horizontal usando a propriedade: background-repeat com o valor de repeat-x.

body {
            background-image: url(imagem_que_você_quer_usar.jpg);

            background-repeat: repeat-x;
         }

Ver mais

Conhecendo o CSS - Juntar imagem ao fundo

Você pode anexar em um documento uma imagem de fundo ou qualquer elemento.
Existem outras maneiras de controlar fundos com CSS, dando-lhe um vasto de opções quando se trata de aplicar design visual ao seu site. Ao combinar uma página com elementos de fundo você pode criar múltiplas camadas de imagens e efeitos especiais.

Primeiro, vamos ter que anexar a imagem de fundo ao documento. Isto é feito selecionando o corpo e criando uma regra usando a background-image com o valor da imagem do local e o nome:

body {background-image: url(imagem_que_você_que_utilizar.jpg);}

Obs.:
As imagens em um fundo ficam ladrilhadas (repetidas) o que é um comportamento normal para o navegador. Com HTML, você não tem nenhum controle sobre como uma imagem será mostrada.
Porém, existe algumas formas de fazer com que ela não se repita.

Você também pode adicionar imagens a elementos. Se você quiser esta imagem
para aparecer no fundo de todas as suas posições, você poderia criar a seguinte regra:
H1, h2, h3, h4, h5, h6 (background-image: URL (imagem_que_você_que_utilizar.jpg);)

Ver mais

Conhecendo o CSS - Cor e fundo dos elementos

Com o CSS, você pode adicionar cor para cada elemento de origem. Para isso, basta selecionar o elemento e criar uma regra. Farei isso para a <h1> para construir uma folha de estilo em nosso simples documento.

Exemplo abaixo:
body {background-color: #999;}
h1 {background-color: #ccc;}
p {background-color: #fff;}
a {background-color: #ccc;}

Bem legal né? Você pode adicionar uma cor de fundo em qualquer elemento!

Ver mais

Conhecendo o CSS - Adicionando cor de fundo

Adicionar cor de fundo é muito fácil e muito útil. Você pode adicionar à sua página
cor de fundo e qualquer elemento de fundo.

Adicionamos cor ao fundo do documento selecionando o elemento do corpo e
utilizando a propriedade e o valor de coloração.

Exemplo:
body {background-color: #FFCCFF;}

Nesse exemplo foi escolhido um fundo rosa claro para todo o corpo. Quando visto
em um browser, este transforma completamente a cor de fundo em rosa.

Obs.:
Você sempre deve definir uma cor para a página, mesmo se tiver a intenção de
usar gráficos e outros elementos de fundo em sua concepção. Isso ocorre porque as
cores são interpretadas rapidamente pelos navegadores que as renderizam bem antes
que qualquer gráfico, proporcionando uma experiência visual mais simples para os
visitantes. ;)

Ver mais