Como Posicionar 2 Backgrounds nos Sites


2 Backgrounds no HTML

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.

 





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

5 comentários em “Como Posicionar 2 Backgrounds nos Sites

  1. André 29 de maio de 2014 20:14

    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 24 de abril de 2014 20:16

    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 19 de julho de 2013 23:46

    Rapaz muito obrigada!! Vlwwwwwwwwwww!!

  4. Roberto 24 de maio de 2012 17:30

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

    • Robson Moulin 27 de maio de 2012 10:01

      A técnica funciona para todos os navegadores Roberto! Testei em todos e funciona normal.

      abs

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>