Background em CSS - Como Alterar Plano de Fundo (Tutorial de CSS: background-image, color, repeat, position e attachment)

Neste tutorial de CSS, vamos falar da propriedade background e de suas varições, onde o CSS, com suas várias ferramentas, nos permite definir e manipular planos de fundo de um site de várias maneiras.


Certificado do Curso de Webmaster - CLIQUE AQUI PARA OBTER O SEU


Cor no Plano de Fundo: background-color em CSS

A maneira mais simples de se alterar um plano de fundo, é apenas definindo uma cor para ele.
Para fazer isso, iremos precisar simplesmente de duas coisas:
  • Usar a propriedade background-color do CSS
  • Código de uma cor
E como já vimos em nosso Tutorial Sobre Cores em HTML, há diversas maneiras de expressarmos uma cor.
A maneira mais simples é através do nome das cores: black, white, red, green etc.

Logo, para deixar o background de seu site com a cor preta, faça em sua folha de estilos:

body {
 background-color: black;
}

Para deixar o fundo do site na cor azul, usando código hexadecimal das cores, fazemos:

body {
 background-color: #0000FF;
}

Também podemos usar o sistema RGB (tudo explicado no tutorial de cores em HTML, já linkado). Por exemplo, a <body> com cor verde:

body {
 background-color: rgb(0, 255, 0);
}

RGB significa red, green e blue (vermelho, verde e azul), que são as cores primárias.
Dê valores de 0 até 255 para cada uma, para utilizar o sistema RGB.
No exemplo, colocamos 0 de red, 255 (tudo) de verde e 0 de blue, por isso saiu tudo green.

Plano de Fundo em < div > e Elementos HTML


Diferente do HTML, onde usamos <bgcolor> para definir o papel de parede do site, podemos fazer com que elemento (como a tag <div>) tenha seu próprio plano de fundo.

Por exemplo, para deixar as tags de cabeçalho H1, H2, ..., H6 com papel de fundo cinza, a div header azul, a div article vermelha, o menu lateral amarelo e o rodapé branco, fazemos:

h1,h2,h3,h4,h5,h6 {
 background-color: gray;
}

.header {
 background-color: blue;
}


.article {
 background-color: #F00;
}

.sidebar {
 background-color: #FF0;
}

.foot {
 background-color: #000;
}


Para saber mais nomes de cores, códigos hexadecimais e rgb, acesse nosso Tutorial Sobre Cores em Fontes, a lógica é a mesma.




Como colocar uma imagem no background em CSS: background-image e url()

Embora seja bem simples e prático apenas usar uma cor como plano de fundo, ainda é bastante comum o uso de alguma imagem para enfeita o papel de parede de seu site.

Podemos usar uma imagem qualquer como background através da propriedade background-image, que deve receber o endereço de uma imagem.
Tutorial de CSS, apostila completa para download, curso grátis com certificado online
O endereço da imagem deve ser colocado entre parêntesis do comando: url()

Por exemplo, salve a imagem ao lado com o nome "background.jpg" e coloque dentro da mesma pasta que sua folha de estilos .css

Para colocar ela como background faça:

body {
 background-image: url(background.jpg);
 color: white;
}

Isso porque a imagem está no mesmo diretório que sua folha de estilos (a minha é estilo.css e está no mesmo diretório que o documento .html) que chamou esta imagem.
(o color: white é para deixar seu texto com a cor branca, já que o fundo é escuro).

Mas se você for mais organizado, irá criar uma pasta chamada "imagens" e irá colocar esse background lá, então o código nesse caso é:

background-image: url(imagens/background.jpg);

Note que isso é o mesmo que:
background-image: url(http://www.seusite.com.br/imagens/background.jpg);

Imagens Repetidas no Plano de Fundo em CSS: background-repeat


Se você notar bem o resultado do código passado, verá que a imagem do plano de fundo se repete várias vezes, veja:
Tutorial de CSS - Apostila completa para download - Curso grátis com certificado online

Se você não quiser que seu background se repita, sua a propriedade background-repeat com o valor no-repeat, veja como fica:

body {
 background-image: url(imagens/background.jpg);
 background-repeat: no-repeat;
}

Se você olhar o resultado, verá que a background.jpg aparece somente uma vez, sem repetição (no-repeat).

Já para fazer com que a imagem se repita horizontalmente (eixo x), usamos o repeat-x:

body {
 background-image: url(imagens/background.jpg);
 background-repeat: repeat-x;
}

Analogamente, para que a imagem de fundo se repita verticalmente (eixo y), usamos o repeat-y:

body {
 background-image: url(imagens/background.jpg);
 background-repeat: repeat-x;
}

E para deixar bem claro que queremos que o background se repita tanto horizontalmente, como verticalmente, por toda a extensão de nosso site, usamos o valor "repeat" (que é default, por padrão):

body {
 background-image: url(imagens/background.jpg);
 background-repeat: repeat;
 color: white;
}


Como Posicionar e Alinhar uma Imagem no Plano de Fundo com CSS: background-position


Caso sua imagem de plano de fundo não se repita, ele vai aparecer em cima e na esquerda, por padrão.
Mas como somos webmasters, sabemos que com o CSS podemos definir o local do plano de fundo que nossa imagem deve aparecer.

E, de fato, podemos fazer isso através da propriedade background-position, do CSS.
Antes de definirmos o local da figura de background, precisamos saber de algumas palavras que irão definir esta posição.
Apostila de CSS completa grátis para download
Na horizontal, vamos usar: left (esquerda), center (centro) e right (direita).
Na vertical, usamos: top (topo), center (centro) e bottom (embaixo).
A sintaxe é:

background-position: horizontal vertical;

Assim, para colocar a imagem "html5.png" no centro da tela, fazemos:

body {
 background-image: url(html5.png);
 background-repeat: no-repeat;
 background-position: center center;
}

Para colocar esta imagem na parte debaixo do site, na direita:

body {
 background-image: url(html5.png);
 background-repeat: no-repeat;
 background-position: right bottom;
}

Caso o conteúdo de seu site seja pequeno (verticalmente falando), a figura não vai aparecer lá embaixo, na janela do browser, e sim embaixo em relação ao tamanho do conteúdo.
Para que a imagem realmente fica na parte debaixo da janela do browser, estilize a tag <html> da seguinte maneira:

html {
 height: 100%;
}

Isso garante que o conteúdo realmente fique "esticado", cobrindo 100% da altura da tela.

No topo e na esquerda:

body {
 background-image: url(html5.png);
 background-repeat: no-repeat;
 background-position: left top;
}

Você também pode definir uma posição fixa de sua imagem de plano de fundo, usando, por exemplo, medidas em pixels. No exemplo de código CSS a seguir, nossa imagem de background vai aparecer na posição de 50px a partir do canto esquerdo e a 60px do topo:

body {
 background-image: url(html5.png);
 background-repeat: no-repeat;
 background-position: 50px 60px;
}

Também é possível dizer o local que a imagem de fundo vai aparecer baseado na porcentagem do site.
Por exemplo, para que seu background apareça a distância de 50% da esquerda e 50% do topo (mesmo que você mude o tamanho da tela), faça:

body {
 background-image: url(html5.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;
}


Fixando uma Imagem no Plano de Fundo em CSS: background-attachment


Se você notar o resultado dos códigos HTML & CSS anteriores, verá que ao rolar a tela (scroll), algumas coisas interessantes ocorrem.

Se você usar o background-repeat: no-repeat, a imagem de fundo aparece uma vez, e se você descer a barra de rolagem, a imagem não acompanha, fica só lá em cima.
E se ela se repetir...bem, ela a imagem de fundo vai se repetir indefinidamente, enquanto você rolar a tela.

Com a propriedade background-attachment podemos definir, do modo que desejarmos, como a imagem do plano de fundo vai se portar, se ela vai ficar fixa em um local da tela do browser (fixed) ou se vai rolar (scroll).

No exemplo a seguir, vamos ficar a imagem de background no centro, sem repetição e vamos fixá-la.
Crie uma body bem longa verticalmente (use vários <p>, por exemplo) e vá rolando o site, descendo na barra de rolagem, e notando que a imagem continua fixa no centro da tela:

body {
	background-image: url(html5.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}

Essa técnica é muito usada principalmente por empresas, que colocam sua logo (ou marca d'água) no site, e fixam com background-attachment: fixed para que ela fique sempre visível.
Com esse feito temos a impressão que o conteúdo desliza no background.

9 comentários:

Anônimo disse...

Muito obrigado pelo belíssimo tutorial...é tão bom saber que há muitas profissionais eficientes na Net. Meus Parabéns, e, uma vez mais, MUITO OBRIGADO!

Anônimo disse...

Show de bola. Muito bom mesmo. Parabéns!

Jesse disse...


Gostaria de Saber como deixar a imagem so na pagina inicial.

Denny Silva disse...

Não entendi bem sua pergunta Jesse,
Basta colocar o background desejado apenas na pagina inicial, porque cada pagina vc defina o background já que é um código para cada pagina.

João Eduardo Saad disse...

Meio fora de tema mas nem tanto , alinhamento vertical de DIV's não funciona com "vertical-align:" , exite alternativa? Usando Bootstrap talvez?!

Romario Souza disse...

Meu background-image só funciona quando a imagem está na mesma pasta que a folha css, quando mudo a imagem para a pasta imagens e digito todo caminho url não funciona, alguém sabe o motivo?

Villa do Mar - Ubatumirim disse...

Olá! Ótima aula, Por favor, como faço para que a imagem cubra sempre a área total de qualquer monitor( qualquer tamanho e resolução)

Anônimo disse...

Me ajudou muito esse tutorial , queria alinhar a imagem pois não conseguia . Alinhava toda a página para a esquerda e não a imagem . Obrigado !

Lucas Medeiros disse...

Parabéns, vc é o cara.