CSS

Inscreva-se em nosso canal no Youtube Daviwp

Como deixar o background do seu site responsivo

11/07/2013 CSS (15) comentários

Olá amigos e amigas, bem vamos ao ponto, como deixar nosso background isso mesmo o fundo do nosso site aquela imagem legal que criamos para colocar de fundo no nosso blog ou site pois é vamos colocar ele responsivo sem utilizar frameworks coisa simples e rápido utilizando css3 isso mesmo!

01 – Primeiro chama a imagem que deseja no seu css veja exemplo abaixo, esse modelo sua img vai ficar fixa no fundo parada com isso só seu conteúdo vai mexer quando tiver rolagem, mas se você não quiser que isso aconteça basta apagar no parâmetro fixed pronto! seu bg vai ficar de boa hehe veja agora o segundo passo para dar o nosso efeito responsivo.

body{
  background: url(assets/images/bg.jpg) no-repeat center center fixed;
}

02 – Bem esse é o ultimo passo galera é com esse código que vamos deixar nosso bg responsivo, cada dia aprendo algo já tinha visto falar nessas propriedades do css3 mas nunca tinha utilizado, em um projeto que estava fazendo depois de pronto o meu cliente pediu para colocar o BG responsivo porque estava sumindo a img no computador dele então para não encher o site de código e script para deixar responsivo busquei essa propriedade e conseguir facilmente fazer isso veja como ficou junto ao nosso código acima.

body{
  background: url(assets/images/bg.jpg) no-repeat center center fixed;
  background-size: cover; /*Css padrão*/
  -webkit-background-size: cover; /*Css safari e chrome*/
  -moz-background-size: cover; /*Css firefox*/
  -ms-background-size: cover; /*Css IE não use mer#^@%#*/
  -o-background-size: cover; /*Css Opera*/
}

É isso galera espero que gostem, abraço até a próxima !

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

  • Elvis

    vlw pela dica funcionou certinho

  • Bruno Renato Viana

    Muito bom. Direto ao assunto.

    • daviwp

      Que bom Bruno valeu!

  • daviwp

    Valeu Thiago, Abraço!

  • Tiago Silva

    Onde eu clico no Joinha???

    • daviwp

      Muito obrigado Tiago, volte sempre!

  • Felipe Lacerda

    Olá Davi,

    Testei em vários PCs e realmente funcionou. Agora quando fui ver em Mobile o mesmo não preenchia a tela toda de forma responsivo igual nos Computadores. O que pode ser?
    o link seria http://www.felipesolucoesweb.com.br/le-chic

  • Bruno Bezerra

    Davi, gostei do tutorial, bastante esclarecedor! Eu gostaria de saber como podemos fazer um background que fique 100% perfeito em nosso site?
    []’s

  • daviwp

    Olá Bia,

    Basta você remover do background a propriedade no-repeat

  • gabrielHdesousa

    muito bom!! o mais simples que encontrei e o melhor

    • daviwp

      Obrigado!

  • daviwp

    Olá Thiago,
    Isso o responsivo é caso você tem uma img difícil de repetir por causa do design talvez que vc usar, ou foto mesmo, já para img que é possível repetir nem precisa.

    Abraço.

  • daviwp

    Olá Fernando,

    Costumo manter o que é mais usado ainda, 27 no máximo resolução de 2000 px atende perfeitamente,
    alguns clientes reclama do bg porque tem a tv grande, ai penso em bg que se repete para não ter erro.

  • Alyne Vieira

    Gostei da dica, funcionou certinho! Obrigada!

    • daviwp

      Obrigado Alyne 😉