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.
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:
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.
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.