Artigos HTML e CSS Código para background HTML e CSS

A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.

As principais propriedades de estilização de um plano de fundo são:

Guia do artigo:
Propriedade Descrição Valores
background Propriedade para configurar todas as propriedades do plano de fundo em uma declaração background-color, background-image, background-repeat background-attachment, background-position
background-attachment Especifica se uma imagem de plano de fundo é fixa ou rola com o resto da página scroll, fixed
background-color Configura a cor do plano de fundo de um elemento. color-rgb, color-hex, color-name, transparent
background-image Configura uma imagem como plano de fundo. url, none
background-position Configura a posição inicial de uma imagem de plano de fundo. top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos.
background-repeat Estabelece se uma imagem de plano de fundo será repetida ou não. repeat, repeat-x, reapeat-y, no-repeat

No nosso exemplo, vamos escolher uma imagem aleatória e a usaremos como plano de fundo e aplicaremos todos os estilos nela.

Primeiro vamos criar o nosso documento HTML, bem simples só com uma div que será a div que irá receber a imagem.


  <!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Propriedades de background em CSS - Linha de Código</title>
     <!-- Aqui chamamos o nosso arquivo css externo -->
    <link rel="stylesheet" type="text/css"  href="estilo.css" />
</head>
<body>
  <div id="teste">
  </div>
</body>
</html>
Listagem 1. página HTML.

background-color

Agora vamos começar a aplicar os efeitos css. Primeiro vamos utilizar o background-color, para aplicar uma cor ao fundo do nosso site.

Listagem 2. background-color.

  body {
  background-color: #082767;
}

Lembrando que as cores podem ser escolhidas pelo nome da cor em inglês, pela tabela de cores rgb e também pela tabela de cores hexadecimais.

Tendo a nossa cor de fundo definida, precisamos agora inserir a nossa imagem como plano de fundo da div, para isso vamos utilizar o background-image, como podemos ver a seguir:

background-image

Nota: Vamos definir um tamanho de 400x de largura e 300px de altura para a nossa div para que possamos demonstrar os efeitos que queremos.


  #teste{
  width: 400px;
  height: 300px;
  background-image: url(logolc.png);
}
Listagem 3. background-image.

Até agora usamos duas propriedades de background, vamos ver como está ficando o nosso tutorial?

Exemplo de background color e image
Figura 1. Exemplo de background color e image.

Por padrão os navegadores assumem algumas propriedades, como podemos ver na primeira imagem, ela está por padrão sendo repetida e com um posicionamento, mas com a ajuda das outras propriedades podemos manipular isso de uma forma bem simples e deixar a imagem exatamente como queremos.

background-repeat

Vamos ver as diferentes variações de repetição da imagem. Vamos incluir mais três div’s em nosso documento HTML, com id’s diferentes e vamos aplicar o seguinte efeito CSS nelas:


  body{
  background-color: #082767;
}
#teste{
  width: 400px;
  height: 100px;
  background-image: url(logolc.png);
  background-repeat: repeat;
}
#teste1{
  width: 400px;
  height: 150px;
  background-image: url(logolc.png);
  background-repeat: repeat-x;
}
#teste2{
  width: 400px;
  height: 150px;
  background-image: url(logolc.png);
  background-repeat: no-repeat;
}
#teste3{
  width: 400px;
  height: 100px;
  background-image: url(logolc.png);
  background-repeat: repeat-y;
}
Listagem 4. background-repeat.

Na Figura 2 poderemos ver o que acontece com a imagem em diferentes casos de repetição.

Usando o background-repeat
Figura 2. Usando o background-repeat.

Agora vamos falar um pouco das outras propriedades:

background-attachment

Essa propriedade é muito legal, pois ela é quem especifica se uma imagem de plano de fundo é fixa ou rola com o resto da página, muito utilizada quando queremos dar destaque em alguma imagem e queremos que ela se mantenha fixa na tela, por exemplo.

Ela possui dois valores, fixed e scroll, os quais definem se a imagem fica fixa na tela ou se vai rolar como o resto da página. Para usá-la é bem simples, veremos como realizar os dois.


  #teste{
  width: 400px;
  height: 200px;
  background-image: url(logolc.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#teste_1{
  width: 400px;
  height: 200px;
  background-image: url(logolc.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
Listagem 5. Exemplo de background-attachment.

background-position

Agora vamos falar do posicionamento do plano de fundo, para isso usamos a propriedade background-position. Existem diversas opções para definição do posicionamento do plano de fundo, na tabela no início desse tutorial vem dizendo quais são.

Essa é uma propriedade muito útil também, pois é com ela que conseguimos definir exatamente aonde a nossa imagem vai se posicionar dentro da nossa div, no exemplo a seguir, irei colocar uma borda na div para podermos ver mais facilmente os limites da div e assim vermos que o posicionamento da imagem está de acordo com o que definimos na propriedade.


  #teste{
  width: 400px;
  height: 200px;
  border: 1px solid;
  background-image: url(logolc.png);
  background-repeat: no-repeat;
  background-position: bottom right;
}
Listagem 6. Exemplo de background-position.

No código acima, definimos que o posicionamento da imagem será: bottom right, ou seja, a imagem ficará posicionada na parte inferior direita da div, como podemos ver na imagem a seguir.

Exemplo de posicionamento do plano de fundo
Figura 3. Exemplo de posicionamento do plano de fundo.

Espero que todos tenham entendido como se trabalhar com as muitas variações de propriedades de background e fiquem a vontade em fazer suas perguntas e expor as dúvidas nos comentários, espero que tenham gostado e até o próximo tutorial.

Confira também

Curso de HTML Básico

Curso de HTML Básico

Curso
Introdução ao CSS na prática

Introdução ao CSS na prática

Curso
Cursos de HTML e CSS

Cursos de HTML e CSS

Cursos