Oi gente! Não sei exatamente se isso se encaixa em layout ou em CSS mas…
Eu gostaria de adicionar uma imagem no fundo do topo e no banner tarja minha loja (www.choilypaper.com.br) tanto no mobile quanto no desktop…
Alguém consegue me ajudar com isso? Meu tema não tem essa opção
Vou deixar de exemplo o de outra loja que fez assim.
Olá, .
Tudo bem?
Esse ajuste é simples.
Basta você aplicar no css da loja o “background-image” do topo.
Abaixo vou dar alguns exemplos: (lembre-se de alterar o link da imagem para aquela que você quiser.)
De preferencia para imagems grandes, largas horizontalmente para ter uma melhor aplicação.
//Exemplo 1: código mais básico, apenas coloca no fundo, sem alinhamentos:
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
}
Vai ficar assim:
//Exemplo 2: código com o fundo aplicado, alinhado ao topo:
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
background-position: top !important;
}
Vai ficar assim igual ao de cima, pois o alinhamento padrão é do topo da imagem
//Exemplo 3: alinhado ao meio:
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
background-position: bottom !important;
}
Vai ficar assim:
//Exemplo 4: alinhado ao bottom (final da imagem)
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
background-position: bottom !important;
}
Vai ficar assim:
//Exemplo 5: alinhado à esquerda:
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
background-position: left !important;
}
Vai ficar assim:
//Exemplo 6: alinhado à direita:
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
background-position: right !important;
}
Vai ficar assim:
//Exemplo 7: aplicado 100% da largura
div#cabecalho {
background-image: url(https://previews.123rf.com/images/serezniy/serezniy2208/serezniy220805014/190441600-papelaria-escolar-no-fundo-lil%C3%A1s.jpg) !important;
background-size: 100% !important;
}
Vai ficar assim:
E agora, você pode mesclar eles no mesmo código, ajustando a posição verticalmente e 100% da largura.
Existem outras aplicações, como não repetir a imagem, etc…
Mas essas acima já dão conta do recado na maioria das vezes
Se precisar de ajuda com especialistas, pode contar com a gente!
Estamosa a mais de 10 anos no mercado, ajudando lojistas aqui na Loja Integrada com ajustes de temas ou criações de novas funções.
Qualquer coisa, nos avise!
Até breve e boas vendas!
|
|
Deu certo! Infelizmente a LI está tirando a qualidade das imagens e não fica como eu gostaria, mas consegui aplicar! Muito obrigada!!