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.