Central de Ajuda

Perguntas frequentes, atendimento online, dúvidas e muito mais...

Layout

Como inserir imagem de fundo no topo do site

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