Como criar um imagem de header "infinta" para as laterias?

Swype · 28 de dezembro de 2011

Estou usando o Wordpress, uma Child Theme do tema Twenty Eleven. A largura padrão do corpo do site é 960px. Queria fazer algo com esse resultado:

http://capinaremos.com/

A imagem usada como header é a seguinte: http://capinaremos.com/wp-content/themes/booger/styles/capinaremos/bg-overlay.png

Queria obter algo com esse resultado, então criei uma imagem 2800x160px. Algo semi flexível com a maior largura possível de 2800px e com a menor largura de 1000px. Porém se eu botar no arquivo CSS

#header {
min-width: 1000px;
max-width: 2800px;
}

ele fica uma imagem gigante de 2800px, que quebra o layout (da pra dar scroll pras laterais), ou seja, a imagem não "corta" e ainda fica descentralizada. Alguém sabe como resolver isso?

DiF · 28 de dezembro de 2011

é só criar o header fora do container. e setar o width dela para 100% setar o background-size para 100% também

veja q isso pode te causar problemas do tipo distorçao de imagem...

teste e veja se obtenha o resultado esperado

Urubu_Nicolas · 29 de dezembro de 2011

Eu estruturaria da seguinte forma:

No CSS atacaria o <body>, lá o pedaço de pequeno do background-image com apenas o pedaço do morro e das nuvens de maneira que a repetição dele não ficaria estranha, está imagem não pode ser muito grande. O código do body ficaria assim: (segue em anexo um exemplo)
```
body{background: url(bg-verde.png) repeat-x;}
```
Então eu criaria um div chamada top, que ficaria responsável pela imagem que não irá repetir com o width de 1000px e só o que fosse passar seria o bg de repetição. O código da div:
```
#topo{width: 1000px; height: o tamanho da imagem; margin: 0 auto; background: url(bg-overlay.png) no-repeat;}
```

Assim que tive usando um monitor/TV de 50" (rsrsrs) conseguiria ver o site com repetição dos morros e céu que fosse passar o tamanho do site de 1000px. É apenas uma sugestão, pode ser feito de n maneiras.

DiF · 29 de dezembro de 2011

@urubu_nicolas, nao podes esquecer que nem todos tem uma tv de 50'' para navegar.. portanto, nao é muito aconselhável a passar dos 960 px. estes 960px em um monitor de 17'' em uma resoluçao de 1024 x 768 ja fica quase no limite da tela.. mais do que isso o site criaria um scroll lateral que é um encomodo.

a solução é usar sempre valores liquidos quando possivel para o caso de um TOP assim. e o site em si usar centralizado em ate 960px.

os valores que o amigo ali ta usando é muito alto para um site.

então minha solução para isso reforço a ideia de criar um header acima do container com valores liquidos para pegar 100% da tela independente da resoluçao ou tamanho de tela.. e usar a sua ideia de usar uma repetiçao contínua da imagem no eixo X.

O conteudo da header, você posicionar entre os 960px do container dentro do header.. assim nao ficando desalinhado com o conteudo do site.

e o site em si, deixar dentro do container centralizado em ate 960px.