Vinicius Baggio Fuentes

  1. Software Engineer — Pivotal Labs
  2. Autor — Casa do Código
  3. Compre já!
11 Oct 2011 — Background Image Com Gradientes

Misturando imagens de background com gradientes

Estou trabalhando atualmente no site RockInSampa, um site que agrega os shows de rock da cidade de São Paulo. O layout final do site é o seguinte:

Layout

O fundo dele consiste de uma leve “textura” com noise, dando uma impressão de cimento ou asfalto, e também um gradiente que vai escurecendo conforme chega-se ao fundo da página.

Porém, este efeito é problemático de se implementar. Se criarmos uma imagem de background suficientemente grande para cobrir toda a possível altura que o site pode chegar, a imagem ficará gigante, deixando o site mais lento para carregar.

Dessa forma, eu recortei a textura, sem o gradiente:

Textura

body {
    background: #1e1e1e;
    background-image: url('textura.png');
}

O resultado foi:

Textura aplicada

Em seguida, usando a propriedade de gradientes do CSS3 e cores alpha, consegui alcançar o background que queria:

Gradiente aplicado

html { min-height: 100%; }

body {
    background: #1e1e1e;
    background-image: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2),
        rgba(0, 0, 0, 0.5)), url('textura.png'); /* Chrome 10+, Saf5.1+ */
}

Há alguns detalhes importantes sobre o CSS acima:

Para mais informações sobre gradientes CSS, veja neste post no CSS tricks.

Leia também

blog comments powered by Disqus