Como inserir imagem de fundo no topo do site

1- Acesse o menu "Loja/Envio de arquivo FTP" de seu painel, e clique no ícone +
2- Após clique em "Adicionar Arquivos"
3- Selecione a imagem que deseja inserir como fundo do topo de sua loja virtual.
4- Clique em "Iniciar Envio" e aguarde até que o envio esteja em 100%
5- Feche a caixa de envio de imagem ou acesse novamente o menu "Loja/Envio de arquivos FTP" e copie a URL gerada para a imagem que enviou
6- Insira a URL de sua imagem dentro desse script CSS abaixo, substituindo o texto em destaque, você pode copiar o script CSS em um bloco de notas para poder editá-lo:
<style>
nav#id-menus-loja, nav.navbar.navbar-default.navbar-static-top, div#navbar2, .TopoFundoInf, #id-menus-loja, .topoPrincipal, .FundoContainer{
background-image: url(COLOQUE AQUI A URL DE SUA IMAGEM);
}
</style>
Segue exemplo ilustrado abaixo:
7- Após copie todo o script CSS já editado (com a URL de sua imagem), acesse o menu "Loja/Layout" aba "HTML banner" de seu painel e cole todo o código no campo HTML topo, conforme ilustrado abaixo:
Pronto! Feito isso a imagem de fundo será exibida no topo de sua loja!
Informações adicionais:
* Recomendamos que a imagem tenha em média 1800px de largura, já a altura é variável, pois cada template possui o topo de um tamanho, o ideal é entre 200px - 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 na 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
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
Segue exemplo de como aplicar os estilos na CSS:
nav#id-menus-loja, nav.navbar.navbar-default.navbar-static-top, div#navbar2, .TopoFundoInf, #id-menus-loja, .topoPrincipal, .FundoContainer{
background-image: url(www.teste.com.br/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
<style>
nav#id-menus-loja, nav.navbar.navbar-default.navbar-static-top, div#navbar2, .TopoFundoInf, #id-menus-loja, .topoPrincipal, .FundoContainer{
background-image: url(www.teste.com.br/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
Comentários