Central de Ajuda

1 - Acesse o Painel de Administrador de sua loja, vá no menu "LOJA>ENVIO DE ARQUIVOS (FTP)". Após clique no botão "ADICIONAR REGISTRO" (botão verde com o sinal de "+" na cor branca):

 

2 - Na nova janela que irá abrir, clique no botão "ADICIONAR ARQUIVO(S)". Selecione a imagem que deseja inserir como fundo do topo de sua loja virtual e após clique no botão "ABRIR":

 

3 - Em seguida clique em "INICIAR O ENVIO" e aguarde até que o envio seja concluído (quando estiver em 100%):

 

4 - Feche a janela de envio de imagem ou acesse novamente o menu "LOJA>ENVIO DE ARQUIVOS (FTP)", clique na URL da imagem que você realizou o enviou. Irá abrir uma nova janela em seu navegador mostrando a imagem, copie na barra de endereço toda a URL de sua imagem:

 

5 - Insira a URL de sua imagem dentro desse Código CSS abaixo, substituindo o texto em destaque, você pode copiar o Código CSS em um bloco de notas para poder editá-lo:

 

<style>nav#id-menus-loja, nav.navbar.navbar-default.navbar-static-top, .TopoFundoInf, #id-menus-loja, .topoPrincipal, .FundoContainer, nav#id-menus-loja, .navbar-default, .navbar-default, .container>.navbar-header{
background-image: url("COLOQUE AQUI A URL DE SUA IMAGEM");
background-size: cover !important;
background-repeat: no-repeat !important;
}
</style>

 

Segue exemplo ilustrado abaixo:

 

6 - Após copie todo o Código CSS já editado (com a URL de sua imagem), acesse o menu "LOJA>LAYOUT" clique na aba "HTML/BANNER" e cole o Código CSS no campo "HTML 1 (topo)".

 

Pronto! Feito isso a imagem de fundo será exibida no topo de sua loja!

 

Informações Adicionais:

Recomendamos que a imagem tenha no mínimo 1800px de largura, já a altura é variável, pois cada template possui o topo de um tamanho, o ideal é entre 200px e 400px.

Você também pode usar uma textura do tipo "pattern" que são imagens pequenas que se repetem sem aparecer (emendas), nesse caso não é necessário que a imagem tenha tamanhos específicos, podendo ser imagens bem pequenas, visto que irão se repetir até completar o espaço do background.

Existem várias configurações adicionais que podem ser feitas na imagem de fundo, segue abaixo algumas propriedades que podem ser usados no Código CSS de imagem de fundo:

 

background-size:

• A imagem terá as dimensões definidas por unidade de medida CSS: 1800px 300px
• A imagem terá suas dimensões originais - este é o valor padrão: auto
• A imagem terá as dimensões de modo a que sua maior dimensão ocupe toda a extensão do box e a menor dimensão seja tal que o aspect ratio (relação entre largura e altura) seja preservado: contain
• A imagem terá as dimensões de modo a que sua menor dimensão ocupe toda a extensão do box e a maior dimensão seja tal que o aspect ratio (relação entre largura e altura) seja preservado: cover

background-repeat:

• Imagem não repete: no-repeat
• Imagem repete na vertical e horizontal: repeat
• Imagem repete na vertical: repeat-y
• Imagem repete na horizontal: repeat-x
• Imagem toca as quatro bordas internas do box e são espaçadas de modo a se distribuírem igualmente: space
• Imagem toca as quatro bordas internas do box e são redimensionadas de modo a preencherem o fundo tocando umas nas outras: round

background-position:

Você pode escolher a posição da imagem:

• Xpx Ypx
• X% Y%
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• top
• right
• bottom
• left