Coloque uma cor ou fotografia atrás do conteúdo.

Dê a uma faixa da sua página uma cor de marca ou uma fotografia, para que um título se destaque e a faixa se leia como um bloco. Define a cor e a fotografia no painel Style de qualquer elemento. Uma Section acrescenta um painel Background effects para fotografia fixa, paralaxe, gradiente ou vídeo YouTube.

O vídeo segue a receita abaixo: põe uma fotografia atrás de um título e um gradiente escuro sobre a fotografia, para que o título branco continue legível.

Antes de começar

• Abra a página no DXPR Builder; apontar para um elemento mostra a barra de controlos com More. Novo no construtor? Veja Crie a sua primeira página.
• Save no diálogo mantém uma alteração no editor. Save na barra de ferramentas do construtor por cima do conteúdo guarda a página e mostra "Saved field".
• Use uma Section para uma faixa completa da página. Só uma Section tem Background effects.
• Use um elemento Text ou Card para uma caixa colorida atrás de algumas linhas dentro de uma coluna.
• Use o seu tema para fundos em todas as páginas, como o corpo da página ou o rodapé.
• Mantenha as palavras fora da fotografia. Uma imagem de fundo não tem texto alternativo, por isso os leitores de ecrã saltam-na. Ponha a sua mensagem num título por cima.

Receita: um título legível sobre uma fotografia

Texto branco sobre uma fotografia preenchida é difícil de ler. Um gradiente escuro sobre a fotografia resolve isso, e continua a funcionar quando troca a fotografia. Precisa de uma Section com o título num elemento Text.

1. Paire o cursor sobre a Section, clique em More e depois em Settings.
2. Abra o painel Style e clique em Select Image em Background image. Escolha uma fotografia. Aparece uma miniatura, com uma lista de tamanhos de imagem.
3. Na lista de tamanhos, escolha um tamanho pelo menos tão largo como o ecrã mais largo para que desenha, ou Original image (No resizing). Evite Optimize for fast loading para uma faixa completa.
4. Defina Background style como Cover e Background position como Center center.
5. Abra o painel Background effects e defina Background effect como Gradient. A sua fotografia fica; o gradiente fica por cima.
6. No campo de cor de Start color, escreva rgba(0, 0, 0, 0.6): preto a 60%. Escreva rgba(0, 0, 0, 0.3) para End color. Deixe Gradient direction em 180, para que o véu corra de cima para baixo.
7. Clique em Save no diálogo. A secção mostra a fotografia sob um véu escuro.
8. Paire o cursor sobre o elemento Text, clique em More e depois em Settings. No painel Style, defina Font color como branco e clique em Save.
9. Clique em Save na barra de ferramentas.

Verifique o título contra a parte mais clara da fotografia. Aponte a um contraste de pelo menos 4,5 para 1, ou 3 para 1 em títulos grandes; a página de tipografia explica estas metas. Continua difícil de ler? Suba ambos os valores, por exemplo para 0,8 e 0,5.

O que vê

A secção mostra a sua fotografia sob um véu escuro, mais escuro no topo, com o título branco por cima. Cover preenche toda a secção, por isso num ecrã estreito corta-se mais dos lados da fotografia.

Como funcionam as definições

A cor fica por baixo da imagem. Aparece nas partes transparentes de uma imagem, nas faixas à volta de uma imagem Contain e enquanto a fotografia carrega. Escolha uma cor próxima do tom principal da fotografia.

O tamanho Optimize for fast loading reduz uma imagem para no máximo 1024 px de largura e guarda-a como WebP. Isso serve para uma caixa, mas fica suave numa faixa completa num ecrã grande.

A mesma imagem carrega em todos os tamanhos de ecrã, telemóveis incluídos. O painel Hover style tem o seu próprio Background e Background image, por isso uma caixa pode mudar de cor ou trocar de imagem ao pairar o cursor.

Efeitos de fundo de secção

Estes efeitos precisam de uma Section. Fixed image e Parallax image movem a fotografia de Background image, por isso defina primeiro a fotografia.

Sobre uma fotografia, o gradiente corre sempre de margem a margem. Start position e End position só se aplicam a um gradiente sem fotografia.

Se não vir o fundo

• A fotografia aparece como uma faixa fina. Um fundo não acrescenta altura; a secção tem a altura do conteúdo e do preenchimento. Adicione conteúdo ou ligue 100% height no painel General. Para mais preenchimento, siga uma secção mais alta.
• A fotografia repete-se ou mostra só um canto. Background style está em Theme defaults. Escolha Cover.
• A fotografia parece suave num ecrã largo. Optimize for fast loading limita-a a 1024 px de largura. Escolha um tamanho maior na lista de tamanhos.
• A fotografia está escondida atrás de preto sólido. As cores do gradiente não têm transparência. Termine cada valor com um número abaixo de 1, como rgba(0, 0, 0, 0.6).
• O título fica escuro. Uma classe de cor no HTML classes do elemento Text, ou uma regra do tema com !important, ganha. Remova a amostra ou veja tipografia.
• O fundo desapareceu depois de recarregar a página. Save no diálogo só mantém uma alteração no editor. Clique em Save na barra de ferramentas.
• A cor não aparece. A fotografia cobre-a. Para uma tonalidade sobre a fotografia, use Gradient em Background effects.
• Start position e End position não mudam nada. A secção tem uma Background image, por isso o gradiente corre de margem a margem. Use Gradient direction e cores transparentes.
• Uma cor de classe ganha. Uma classe como Primary background em HTML classes vence o seu Background. Remova a amostra.
• Background não faz nada num Circle counter, Progress bar ou Divider. Estes elementos usam as suas cores. Defina Background color, Back color ou Color no painel General.

E a seguir?

• Altere o tamanho e a cor do texto: defina a cor do título sobre a sua fotografia e verifique o contraste.