Logotipo Design Interativo

Como Posicionar 2 Backgrounds nos Sites


Atualmente os sites estão cada vez  mais cheios de elementos gráficos. A utilização de backgrounds para criar um visual único é definitivamente uma das principais técnicas.

Cada um tem sua forma de inserir suas imagens de fundo, mas sem dúvida background na tag BODY é a principal.

O que alguns Web Designers não sabem é que podemos utilizar a tag HTML para inserir background, não sabendo disso muitos criam divs em 100% para suprir a necessidade de colocar 2 backgrounds na mesma página.

Não existe segredo para isso, da mesma maneira que você estiliza a tag BODY no CSS você pode fazer com a tag HTML.

Abaixo quero dispor de um exemplo de como fazer a inserção de um background na Body e outro no Html, o funcionamento é simples pense sempre como camadas, onde primeiro temos o html, por cima a body e depois a div.

 

body {background: url(images/header_bg.jpg) repeat-x 0 top;}
html {background:url(images/footer_bg.jpg) repeat-x 0 bottom;}

 

Prontinho no exemplo temos um background na topo chamado header_bg e no rodapé do site temos um background que esta na tag html chamado footer_bg.

Quero lembrar que não esqueçam de deixar sem cor na tag body ou você fará com que a imagem da tag html não apareça já que uma sobrepõe a outra.

 

Comentários
  1. André disse:

    Muito Bom! Mais estou com um problema quando há scroll horizontal que não é o normal o background da tag body na área de rolagem some. Estou pesquisando mais até o momento quem chegou mais perto foi você. Teria Alguma solução?

    Desde já agradeço.

  2. Luis Alberto Fiuza disse:

    Mais um crack no assunto.! Estou deixando nos favoritos aqui por que vou ler todos os artigos, vai ser interessante. Muito obrigado pelas informações. Deus te abençoe cada dia mais.

  3. Maira disse:

    Rapaz muito obrigada!! Vlwwwwwwwwwww!!

  4. Roberto disse:

    Olá… legal a técnica, mas testou em todos navegadores principais…
    Tenho pra mim que no IE não vai rolar.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade