[ #18 | B E D A ] Konnichiwa fadinhas & elfos! Como estão? Hoje resolvi ajudar a como fazer um banner na largura total, do blog. O que tenho visto muito na blogosfera é a pessoa fazer apenas se baseando na própria tela, na própria proporção, mas não deveríamos fazer assim. Nesse post darei algumas dicas, espero que gostem! Let's Go? 

Esses dias tenho visitado alguns blogs que não visito sempre, e percebi que muitos o cabeçalho ficava torto, e ele todinho do lado esquerdo e o conteúdo do blog no meio. Acabo vendo isso, pois a tela do meu pc é grande, já que uso pra TV também. Eu fiz o meu, acreditando que a minha tela era grande suficiente e que colocando ''width:100%'' iria funcionar, mas quando cheguei no meu curso de design ficou incompleto no canto direito, a partir disso ajeitei na maior resolução que consegui, esse post é baseado na minha experiencia então aconselho isso para vocês também! Vou explicar melhor vem comigo!

body { 
background-image: url('URL DO FUNDO DE CABEÇALHO'); 
background-size: 100%;
background-position-x: 0px; 
background-position-y: 0px; 
background-repeat: no-repeat;
background-attachment: scroll; }

Para colocar o fundo você vai precisar saber a url da sua imagem, para isso recomendo que hospede no imgur e ele te dará o link, cole dentro das aspas e salve! Ajuste oque achar necessário e prontinho!

~ Outras opções ~

Meu blog bugou! O que fazer? Teste colocar do jeito mais simples, apenas assim: body {

background-color: #fff; }

Uso um template baixado no meu blog, o que fazer? Nesse caso, procure por body , não substitua nada! Apenas adicione antes de fechar as chaves e acima da cor de fundo: background: url("URL DO FUNDO DE CABEÇALHO") no-repeat;  

Ainda não foi, existe outro código? Sim! Pode testar também: 

body, html { height: 400px; margin: 0; padding: 0; }
body {background: url("URL DO FUNDO DE CABEÇALHO") no-repeat; }
html body .region-inner { min-width: 0; max-width: 100%; width: auto; }