Topo com imagem de fundo

Olá pessoal neste artigo vou lhe ajudar a dar uma personalizada no topo da sua loja usando imagem, para dar aquele “tapa no design”, vamos lá. Antes de começar a fazer os ajustes, vamos dar uma olhada nestas duas lojas de demonstração da BNW:

Note que cada uma tem uma imagem somente no topo, para chegar neste efeito precisamos primeiro definir o tamanho da imagem no topo, o mais importante é definir a altura que esta imagem vai ter, para medir você deve pegar do início do fim do navegador até metade do menu da loja (no caso da loja Moda Infantil), como mostra a imagem abaixo:

Sabendo do total da altura vamos criar uma imagem desta altura e largura pode ser grande, no caso da loja de moda infantil que tem 2580x147px, para cobrir todo o topo com as cores, já na imagem do topo da loja de Games, ela tem o tamanho de 292x354px, ela passa um pouco do menu para dar uma visual mais legal, mas ela se repete de ponta a ponta no topo, vamos falar disso mais abaixo, mas por hora, veja como está a imagem do site de Moda infantil:

Site: https://www.iloveimg.com/pt/recortar-imagem

Agora que temos a imagem de fundo do topo vamos na loja e fazer algumas modificações, primeiro vamos o menu de Customização > Personalizar aqui primeiro vamos mudar a cor de fundo do topo para transparente, basta clicar no campo e mudar nesta faixa preta e branca, até ela desaparecer, veja na imagem abaixo:

Pronto, agora vamos na aba de Avançado e aqui vamos marcar como Sim a opção de Utilizar Fundo de Página Personalizado no campo de imagem vamos subir a imagem que criamos para o topo, e no campo de Modo de Repetição podemos fazer com que ela fique apenas no centro marcando a opção de no-repeat ou ela pode repetir ao longo do topo topo marcando a opção de repeat-x. E por fim a Posição deve ficar center top