Estilos de fundo - Ajuda do Webflow

Last updated on 10/8/2025@mrbirddev
Estilos de fundo - Ajuda do Webflow

Uma visão geral dos estilos de fundo que você pode definir em um elemento: cor, imagens, gradientes, sobreposições de cor e vídeos.

AVISO DE CONTEÚDO — esta seção pode afetar pessoas com sensibilidades visuais. A discrição do espectador é aconselhada.

Cor de fundo

Você pode definir uma cor de fundo em qualquer elemento, exceto imagens e vídeos (embora você possa usar imagens e vídeos como fundos). Adicione uma cor de fundo inserindo um valor de cor (por exemplo, hex, rgba ou nome da cor) ou usando o seletor de cores. Você também pode adicionar cor de fundo a elementos de texto ou a conteúdo de texto específico dentro de um elemento de texto.

Se você deseja que as cores de fundo sejam consistentes em todo o seu site, use a tag Body (Todas as páginas) para herança. Estilize-a selecionando o elemento Body e escolhendo a tag no painel de Estilo ou usando o menu de herança. Quaisquer alterações no Body (Todas as páginas) serão padrão para novos elementos.

A maioria dos elementos tem um fundo transparente por padrão. Alguns elementos, como o componente Slider, têm uma cor padrão que você pode substituir.

Imagem de fundo

O Webflow oferece muitas opções para personalizar sua imagem de fundo.

Para adicionar ou alterar a imagem de fundo:

  • Role até Fundos no Painel de Estilo
  • Clique em Escolher imagem no painel de Ativos
  • Marque a caixa para @2x para imagens mais nítidas em dispositivos HiDPI

Para definir um vídeo de fundo, use o componente de vídeo de fundo no painel Adicionar.

Tamanho da imagem de fundo

  • Personalizado: Defina valores de largura/altura ou porcentagem. Escale maior com valores acima de 100%.
  • Cobrir: Preenche e cobre o fundo, possivelmente cortando a imagem.
  • Conter: Mantém a imagem contida dentro do elemento.

Posição da imagem de fundo

O padrão é no canto superior esquerdo. Você pode ajustar manualmente as posições (px, %, VW, VH).

Ladrilho

Imagens de fundo se repetem vertical e horizontalmente por padrão. Controle para repetir horizontalmente, verticalmente ou não repetir.

Fixo ou rolável

Escolha Não fixo (imagem rola) ou Fixo (imagem permanece no lugar). Imagens Fixas são contidas pela janela de visualização.

Gradientes

Gradientes podem ser usados sozinhos ou em camadas sobre cor/imagem de fundo. Dois tipos:

  • Gradientes lineares
  • Gradientes radiais

Ambos têm pontos de parada onde as cores desvanecem.

O Safari trata gradientes para transparência como “preto transparente”, então a transparência parecerá preta no Safari.

Gradiente linear

Defina a direção pelo ângulo via dial, setas (incrementos de 45 graus) ou entrada de campo.

Paradas de gradiente

Edite cor/opacidade nas paradas. Camadas sobre imagem tornam a imagem visível em opacidade mais baixa. Adicione paradas clicando. Remova arrastando para fora.

Repetir

Alterna para repetir o gradiente.

Reverter

Ícone para reverter posições de parada.

Gradiente radial

Cria gradiente circular. A parada à esquerda é a cor no centro.

Posição

Escolha o ponto focal via pontos ou manualmente com valores/unidades.

Tamanho

Controles predefinidos:

  • Lado mais próximo: centro ao lado mais próximo
  • Canto mais próximo: centro ao canto mais próximo
  • Lado mais distante: centro ao lado mais distante
  • Canto mais distante: (padrão)

Sobreposição de cor

Adicione sobreposição de cor aos fundos com seletor de cor e opacidade.

Camadas de imagens e gradientes

Empilhe várias imagens de fundo, gradientes e sobreposições para efeito. Reorganize arrastando, alterne visibilidade com ícone de olho, exclua com lixeira.

Vídeo de fundo

Vídeos de fundo são vídeos silenciosos e em loop para fundos, adicionando um toque cinematográfico. Esteja ciente:

Vídeos que reproduzem automaticamente e em loop podem ser distrativos ou incapacitantes para pessoas com problemas cognitivos/vestibulares. Sempre forneça controles para pausar.
O Webflow fornece um botão de play/pausa por padrão para acessibilidade. Os vídeos não serão reproduzidos automaticamente para usuários com configurações de "Preferência por movimento reduzido".

Adicione com Busca rápida (CMD/CTRL+E) ou Painel de Adição > Componentes. Faça upload do seu vídeo (<30MB; webm, mp4, mov, ogg). Os nomes dos arquivos devem evitar espaços/caracteres especiais.

A transcodificação ocorre após o upload (mp4 & webm para suporte do navegador).

Configurações de vídeo

  • Repetir vídeo: repete continuamente.
  • Reprodução automática do vídeo: inicia ao carregar a página.
  • Incluir botão de play/pausa: o visitante pode controlar a reprodução.
O WCAG exige controles de pausa/parada/ocultação para conteúdo em movimento que dure mais de 5 segundos. Sempre forneça controles para acessibilidade.

Visualizando o vídeo de fundo

  • Passe o mouse sobre a miniatura
  • Abra em nova aba
  • Ícone de visualização na barra

Substituindo o vídeo de fundo

Abra as configurações para substituir o vídeo, transcodificar, visualizar, etc.

Usando o vídeo de fundo como uma seção

Coloque conteúdo dentro do elemento de vídeo de fundo. Estilize como de costume no painel de estilo.

Os vídeos de fundo podem não ser reproduzidos automaticamente em dispositivos de toque se o modo de economia de dados ou de baixa energia estiver ativado.

Sobreposição de vídeo de fundo

Adicione uma sobreposição de gradiente ou sólida para contraste. A sobreposição fica sobre o vídeo, abaixo do conteúdo.

E é assim que se usa fundos no Webflow!

Voltar para a ajuda do webflow

Last updated on 10/8/2025@mrbirddev
Recent Articles
Loading...