Carregando Post...

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: 




  1. a imagem terá as dimensões definidas por unidade de medida CSS: 1800px 300px

  2. a imagem terá suas dimensões originais - este é o valor padrão: auto

  3. 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

  4. 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:




  1. imagem não repete: no-repeat

  2. imagem repete na vertical e horizontal: repeat

  3. imagem repete na vertical: repeat-y

  4. imagem repete na horizontal: repeat-x

  5. imagem toca as quatro bordas internas do box e são espaçadas de modo a se distribuírem igualmente: space

  6. 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:



  1. Xpx Ypx

  2. X% Y%

  3. top left

  4. top center

  5. top right

  6. center left

  7. center center

  8. center right

  9. bottom left

  10. bottom center

  11. bottom right

  12. top

  13. right

  14. bottom

  15. left



    Segue exemplo de como aplicar os estilos na CSS:



    <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

Deixe um Comentário


Onde estamos ? clique no mapaFechar Mapa

Entre em Contato

Escreva para nós, vamos trocar algumas ideias!

Telefone

(71) 9194-7426

(71) 99194-7426 (WhattsApp)

Email

hswebssa@gmail.com

Localização

Avenida Santos Dumont 4487 Recreio do Ipitanga Lauro de Freitas-BA Cep: 42700-170 Shopping Passeio Norte