Sweet Dreams: Tutorial: Como criar um cabeçalho Infinito

Hellooo!!!

Tudo bem com vocês???

Bem, antes de mudar o blog, decidi postar alguns tutoriais do atual layout, pois não me lembro onde vi, não me lembro como faz, então cavuquei no HTML do blog para poder entender como foi feito e poder postar (até como uma forma de guardar caso eu utilize novamente).

Então, o tutorial de hoje é de como fazer este cabeçalho infinito nas laterais.

Vou ensinar duas formas de fazer ele.

Bora pro tutorial?

Antes de começar, você precisa ter a imagem do cabeçalho. Você pode usar a que preferir.

Aqui estou usando somente a imagem do fundo, o letreiro com o nome do blog eu já já explico com mais detalhes, mas ele foi colocado como um cabeçalho normal no: Layout > Header.

Lembre-se, ela irá se repetir horizontalmente, então, caso sua imagem possua algum recorte, ele pode ficar evidente. Neste meu cabeçalho do layout mesmo, tem um pequeno detalhe que pode exemplificar isso, que seria justamente onde uma imagem termina e onde outra começa.

Maasss, detalhes né haha.

Você pode fazer uma imagem do tamanho que quiser, mas lembrem-se disso, ok?

Hospede suas imagens onde preferir (eu costumo utilizar do próprio espaço das postagens para hospedar minhas imagens).

Pra começar, vá no Tema do seu blog, clique na setinha e selecione a opção "Editar HTML".

Dentro do código, dê CTRL + F para abrir a pesquisa e pesquise por:

/* Content

E logo após ele, apague o trecho abaixo.

Primeira forma
Repetindo o cabeçalho horizontalmente

Para manter o tamanho original do cabeçalho e somente repetir ele horizontalmente, cole o seguinte código no lugar do código que foi apagado.

body {
background-image:
url("LINK DA IMAGEM DO CABEÇALHO"), /* Coloque o link da imagem do cabeçalho */
url("LINK DA IMAGEM DO BACKGROUND"); /* Coloque o link da imagem do backgound do blog */

background-repeat:
repeat-x,
repeat;

background-position:
center top,
left top;

background-size:
auto,
auto;
}

Segunda forma
Ajustar o cabeçalho proporcionalmente à largura

E se a intenção é ajustar o tamanho do cabeçalho proporcionalmente à largura da página, use o seguinte código ao invés do anterior:

body {
background-image:
url("LINK DA IMAGEM DO CABEÇALHO"), /* Coloque o link da imagem do cabeçalho */
url("LINK DA IMAGEM DO BACKGROUND"); /* Coloque o link da imagem do backgound do blog */

background-repeat:
no-repeat,
repeat;

background-position:
center top,
left top;

background-size:
100% auto,
auto;
}