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.

Step 1 - Go to Site Styles

In the Home Menu, click Design, then click Site Styles. For more help using Site Styles, visit Making style changes.

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

The tweak name varies by template, but look for a tweak in Site Styles named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it. 

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.

Alternatively, click Search For Image to add a free or premium stock image. This is a great option if you don't already have an image to use. To learn more, visit Searching and adding stock images.

add_background_image.jpg

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.

Position (Posição)

Defina a posição da imagem do banner:

  • 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)
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.

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

How much of your background image displays depends on how you set up your other site elements. The style options and tweak names vary from template to template, but use your Site Styles to experiment with some or all of the following areas of your site:

  • 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.
  • See our troubleshooting tips for Site Styles tweaks that work well on mobile.

Resolução de problemas

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

This occurs when the background image is stretching to cover the length of the browser window. This is especially true for Blog Pages or Events Pages set to List view, since they are typically longer than other pages, and for mobile, where page content stacks vertically. The taller the page content, the more stretched the background will be to fully cover it, and the more zoomed in it will appear. 

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 218
Adicionar uma imagem de fundo