Background adaptável a qualquer resolução de tela com CSS 3

Fonte: Gustavo D. Castro/CriarNet

Definir o background de um site pode parecer tarefa simples, mas não é, o background é uma parte importante de um site e quando mal escolhido pode desvalorizar com qualquer arte que tenha sido desenvolvida para o layout, atualmente vem se utilizando muito backgrounds fixos que geralmente deixam os sites mais botinos e com um tom de modernidade, o grande problema de usar background que não se repetem é que dependendo da resolução de tela a imagem escolhida vai além da resolução de seu visitante cortando as vezes partes importantes da imagem ou as vezes a imagem escolhida é pequena para o tamanho de resolução de tela do visitante.

Para fazer com que uma imagem se adaptasse bem a qualquer resolução de tela existiam várias possibilidades, mas nenhuma que não passasse perto do que chamamos de gambiarra.

Com a chegada do CSS 3 podemos fazer com que uma imagem fique como background se adaptando a qualquer resolução de tela se expandindo por toda a tela e perdendo o mínimo possível de sua proporção. Esse tutorial é destinado a pessoas que desenvolvem sites na internet.

Como colocar uma imagem como background que se adapta a qualquer resolução de tela.

Para adicionar qualquer imagem como background e fazer com que ela se adapte a resolução de tela do visitante é fácil, veja o código abaixo:

body {
background-image: url(caminho/sua/img/bg.jpg);
background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;}

Modifique a url para o endereço correto de sua imagem que deve estar em uma boa resolução, costumo criar minhas imagens nos tamanhos 1300px x 700

Tudo pronto, agora o seu site já possui um background que se adapta a qualquer resolução de tela.

Curta nossa Fan-Page

Tags | background, css3, resolução, site