Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Adicionar uma imagem de fundo

As imagens de fundo são exibidas atrás do conteúdo do site, adicionando um elemento visual para ajudar a definir o tom do seu site. 

Você pode adicionar imagens de fundo em muitos templates do Squarespace. Os estilos das imagens de fundo variam de acordo com o template, mas a maioria é comum ao site todo, ou seja, a mesma imagem é exibida em todas as páginas do site. Todas as imagens de fundo podem ser definidas sem margens para que preencham a página até as bordas do navegador. 

Assistir a um vídeo

Melhores práticas

O tipo de imagem escolhido depende da estética pessoal e dos objetivos do site, mas há algumas orientações gerais:

  • Para imagens de plano de fundo sem margens, recomendamos carregar imagens com largura de 1500 pixels a 2500 pixels. 
  • Os padrões e imagens abstratas sem texto ou bordas geralmente funcionam melhor, pois oferecem maior flexibilidade ao recortar, que sempre acontecerá até certo ponto.
  • Repetir padrões oferece maior flexibilidade ao estilizar a exibição da imagem.
  • As imagens de fundo não serão transferidas se os templates forem trocados.

Formato da imagem

Imagens de fundo sem margens costumam ser recortadas de forma diferente em dispositivos móveis e desktops, porque dispositivos móveis costumam ser visualizados como retrato.

Ao escolher uma imagem de fundo, considere como os visitantes vão acessar seu site:

  • Se achar que a maioria de seus visitantes verá seu site em dispositivos móveis, você pode minimizar os cortes escolhendo uma imagem de fundo com altura superior à largura.
  • Se a maioria dos visitantes acessar em desktops, use uma imagem em forma de paisagem ou próxima a um quadrado.
  • Para sites de uso misto, escolha uma imagem de fundo que possa ser recortada de diversas formas.

Templates suportados

Os templates a seguir são compatíveis com imagens de plano de fundo comuns ao site todo. Os templates são agrupados por família.

  • Adirondack
  • Avenue
  • Família Aviator (Aubrey, Aviator) - Adicionalmente, a Página de Informações suporta uma imagem de fundo específica para a página.
  • Five
  • Forte
  • Momentum
  • Família Mountauk (Julia, Kent, Montauk, Om)
  • Native
Dica: Se o seu template não for compatível com planos de fundo em todo o site, saiba como criar planos de fundo específicos de página.

Passo 1 - Acesse o painel Estilos do Site

No Menu Inicial, clique em Design e depois em Estilos do Site. Para saber mais sobre como usar o painel Estilos do Site, acesse Como fazer alterações de estilo.

Nota: Para adicionar uma imagem de plano de fundo específica à página dos templates Aviator ou Aubrey, primeiro acesse o painel de Páginas e abra a Página de Informações. Abra qualquer outro tipo de página para adicionar o plano de fundo comum ao site todo.

Passo 2 - Adicione uma imagem

O nome do ajuste varia de acordo com o template, no entanto, procure no painel Estilos do Site um ajuste chamado Imagem de fundo, Imagem de fundo do site ou Imagem de fundo da página. Clique no ajuste para abri-lo. 

Para usar uma de suas próprias imagens, arraste sua imagem para o carregador de imagens. Você também pode clicar no carregador de imagens para abrir um menu de seleção de arquivos e selecionar um arquivo do seu computador.

Outra opção é clicar emBuscar imagem para adicionar uma imagem gratuita ou de banco de imagem premium. Essa é uma ótima opção caso ainda não tenha uma imagem para usar. Para saber mais, acesse Pesquise e adicione cenas de bancos de imagem.

Um ajuste de imagem de fundo no qual você faz upload de imagens ou busca de imagens de acervo.

Passo 3 - Estilize e recorte a imagem

Após adicionar a imagem de fundo, use as opções embaixo do carregador de imagens para estilizar a imagem e consertar recortes e distorções que possam haver.

Size (Tamanho)
  • Auto (Automático) - A imagem mantém sua largura e altura originais. Isso é bom para imagens menores que você deseja repetir.
  • Cover (Cobrir) - Dimensiona a imagem de modo que fique de um tamanho suficiente para cobrir completamente a área do plano de fundo (sem margens). Como resultado, a imagem toda pode não ser exibida. A imagem pode parecer diferente em cada página dependendo da altura do conteúdo da página.
  • Contain (Conter) - Dimensiona a imagem para que a borda mais longa (largura ou altura) se encaixe no navegador. 

Nos modos Auto (Automático) ou Contain (Conter), a cor do plano de fundo do site pode ser exibida atrás da imagem. Use os ajustes de Repeat (Repetir) para arrumar.

Position (Posição)

Define a posição da imagem de fundo:

  • Top Left (Parte Superior à Esquerda), Top Canter (Parte Superior Central), Top Right (Parte Superior à Direita)
  • Center Left (Centro à Esquerda), Center Center (Centro ao Centro), Center Right (Centro à Direita)
  • Bottom Left (Parte Inferior à Esquerda), Bottom Center (Parte Inferior Central), Bottom Right (Parte Inferior à Direita)
Repeat (Repetir)

Certifique-se de que o Size (Tamanho) seja configurado como Auto (Automático) ou Contain (Conter)

    • No-repeat (Sem repetir) - Exibe a imagem uma vez.
    • Repeat (Repetir) - Repete a imagem para que ela cubra todo o plano de fundo.
    • Repeat-X (Repetir em X) - Repete a imagem somente no eixo horizontal.
    • Repeat-Y (Repetir em Y) - Repete a imagem somente no eixo vertical.

Nos modos de No-repeat (Sem repetir), Repeat-X (Repetir em X) e Repeat-Y (Repetir em Y), use as opções de Position (Posição) para ajustar a exibição da imagem.

Fix Position (Posição Fixa)

Quando marcada, a posição da imagem continua estática atrás do conteúdo que está sendo rolado para cima e para baixo. Quando desmarcada, a posição rola para cima e para baixo com a página.

Em muitos navegadores móveis, incluindo iOS, esse recurso não tem efeito, e a imagem é rolada junto com a página.

Passo 4 - Ajuste outras áreas do site

Quanto da imagem de fundo que aparece depende de como os outros elementos do seu site são configurados. As opções de estilo e o nome dos ajustes variam de acordo com o template, mas use o painel Estilos do Site para explorar algumas ou todas as áreas do site, como:

  • Plano de fundo da área do conteúdo principal (ou "tela")
  • Plano de fundo do cabeçalho
  • Plano de fundo do rodapé
  • Largura do site e do conteúdo
Dica: Pode ser que você queira deixar as cores do plano de fundo parcialmente opacas para que a imagem do plano de fundo apareça.
Nota: Um plano de fundo ou uma cor de sobreposição poderá ser exibida enquanto uma imagem ou banner de plano de fundo é carregado.

Passo 5 - Salvar

Clique em Save (Salvar) para publicar suas alterações.

Passo 6 - Veja como seu site é exibido em dispositivos móveis (opcional)

A mesma imagem de fundo é exibida em dispositivos móveis e desktops. Para ver o efeito, é uma boa ideia manter seu celular por perto e atualizar seu site nele após salvar alterações em um computador desktop. Para uma visualização rápida conforme você edita em um desktop, use o Simulador de Dispositivos

Dicas:

  • Ao escolher uma imagem de fundo, o formato da imagem pode fazer uma grande diferença no modo como ela é exibida em dispositivos móveis.
  • Veja nossas dicas de soluções de problemas para descobrir ajustes de Estilos do Site que funcionam bem em dispositivos móveis.

Resolução de problemas

A imagem do plano de fundo distorce em certas páginas ou no celular

Isso ocorre quando a imagem do plano de fundo se estica para cobrir o comprimento da janela do navegador. Acontece principalmente em Páginas do Blog ou Páginas de Eventos em modo de Lista, por serem mais compridas, e nas páginas configuradas para celular, em que o conteúdo é empilhado na vertical. Quanto mais alto o conteúdo da página, mais esticado fica o plano de fundo para cobri-lo totalmente, e mais ampliado irá aparecer. 

Para consertar isso, abra o ajuste da imagem do plano de fundo (ver Passo 3 acima) e tente uma ou ambas opções:

  • Marque a Fixed Position (Posição Fixa) (Nota: não afeta alguns dispositivos móveis, incluindo o iOS)
  • Selecione o Size (Tamanho): Contain (Conter) ou Size (Tamanho): Auto (Automático)

Pode ser que você queira tentar com as opções de Position (Posição) para ver qual versão redimensiona melhor em páginas compridas e na exibição em celulares.

A imagem está embaçada ou pixelizada

Isso ocorre quando uma imagem estica além de suas dimensões originais para preencher a área do plano de fundo. 

Para imagens sem margens, recomendamos carregar imagens com largura entre 1500 e 2500 pixels na maioria dos sites.

Nota: Não recomendamos carregar imagens de plano de fundo maiores que 2500 pixels na margem mais comprida. As imagens de plano de fundo comuns ao site todo sempre carregam o tamanho original da imagem. Se a imagem do plano de fundo for maior que 2500 pixels, ela pode gerar problemas para os visitantes.

Imagens de plano de fundo e código personalizado

O código personalizado adicionado ao site pode interferir em como a imagem de plano de fundo é exibida. Se você estiver solucionando problemas com a imagem de plano de fundo, desabilite temporariamente quaisquer códigos personalizados para ver se o problema está relacionado ao código. Para saber mais, acesse Adicionando HTML, CSS e JavaScript personalizados.

Exibição em dispositivos móveis

Veja como é possível usar ajustes de estilo para corrigir problemas comuns de exibição em dispositivos móveis. Como não há ajustes separados para dispositivos móveis e desktops, uma boa alternativa é experimentar essas opções para ver quais oferecem o melhor visual.

  • Imagem ampliada ou distorcida - Defina a imagem com Size: Contain (Tamanho: Conter) ou Size: Auto (Tamanho: Automático). Talvez seja necessário também carregar uma imagem maior, com até 2500 pixels ao longo de sua borda mais comprida.
  • O tamanho da imagem de fundo muda em páginas diferentes - Defina sua imagem com Size: Contain (Tamanho: Conter) ou Size: Auto (Tamanho: Automático).
  • Imagem centralizada incorretamente - Use as opções de Position (Posição) para ajustar onde sua imagem será exibida na página.
  • Imagem de fundo não aparecendo - A cor de fundo de seu conteúdo principal pode estar cobrindo a imagem. Ajuste sua transparência para revelar a imagem de fundo. (Isso também afetará a visualização no desktop.) Certifique-se de que sua imagem original tenha menos do que 2500 pixels ao longo de sua borda mais longa, pois imagens maiores podem não ser exibidas. No Aviator, Aubrey e Encore, certifique-se de que o ajuste Mobile Background Image (Imagem de Fundo em Dispositivos Móveis) esteja marcado.
  • A imagem não cobre todo o recipiente - Selecione Size: Auto (Tamanho: Automático) ou Size: Contain (Tamanho: Conter) e Repeat (Repitir) a imagem para cobrir todas as áreas em branco.

Exemplos

Experimente as opções de ajuste de imagem de plano de fundo para encontrar a disposição perfeita para a imagem de plano de fundo. Incluímos alguns exemplos abaixo para ajudar a inspirar você.

Aqui está um exemplo no template Montauk:

  • Size: Cover (Tamanho: Cobrir)
  • Fixed Position (Posição fixa)
  • Canvas Background (Plano de Fundo de Tela) cor definida como parcialmente opaca

Aqui está um exemplo no template Forte:

  • Size: Auto (Tamanho: Automático)
  • Repeat: Repeat (Repetir: Repetir)

Aqui está um exemplo o template Native:

  • Position: Top Left (Posição: Parte Superior à Esquerda)
  • Size: Auto (Tamanho: Automático), Repeat-Y (Repetir em Y)
  • Cor do plano de fundo do site: Azul

E aqui está o template Aviator mostrando os plano de fundo comuns ao site vs os específicos de Página de Informação:

  • O Aviador e Aubrey têm esta funcionalidade.

aviator-backgrounds.gif

Adicione imagens de fundo específicas de página

Existem várias maneiras de criar uma imagem de plano de fundo em apenas uma página.

  • Páginas de Entrada - As Páginas de Entrada estão disponíveis em todos os templates e são compatíveis com texto, botões, títulos, logos e formulários. Elas criam uma página autônoma com suas próprias opções de estilo e não exibem o cabeçalho, a navegação ou os rodapés do site. Isso as torna uma ótima opção para quem deseja criar uma página de destaque.
  • Banners - Alguns templates suportam imagens de banner, que são exibidas na parte superior da página e são compatíveis com sobreposição de conteúdo. Na família Brine, por exemplo, é possível usar blocos na área de introdução para adicionar muitos tipos diferentes de conteúdo no seu banner.
  • Seção de Página Índice - Nas famílias de templates Brine e Pacific, é possível usar uma Índice para adicionar uma imagem de fundo atrás de uma seção de Página Simples.
Esse artigo foi útil?
Usuários que acharam isso útil: 31 de 230
Adicionar uma imagem de fundo