---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/fundo'
title: 'Coloque uma cor ou fotografia atrás do conteúdo | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:13:23+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Coloque uma cor ou fotografia atrás do conteúdo'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:13:23+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/fundo'
      articleSection: 'Estilizar os elementos'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/fundo'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) # Coloque uma cor ou fotografia atrás do conteúdo.

 Aprender DXPR BuilderCriar páginasEstilizar os elementos

   ## Neste guia

 Guias relacionados

- [Altere o tamanho e a cor do texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia)

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](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina).
- **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](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/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

| Controlo | O que faz |
|---|---|
| **Background** | Uma cor atrás do conteúdo. O cursor de opacidade do seletor torna-a transparente. |
| **Background image** | Uma imagem atrás do conteúdo: de **Select Image**, de um URL ou de **AI Image Generation**, salvo o seu site a tenha desligado. |
| **Background style** | Como a imagem preenche o elemento. Veja a tabela seguinte. |
| **Background position** | O ponto a que a imagem está presa. Com **Cover**, decide que parte da fotografia fica visível. |

| **Background style** | Resultado |
|---|---|
| **Theme defaults** | Salvo o tema dizer o contrário, a imagem repete-se no seu tamanho a partir do canto superior esquerdo. |
| **Cover** | A imagem preenche o elemento e as margens que não cabem são cortadas. O melhor para fotografias. |
| **Contain** | A imagem inteira aparece, uma vez. Podem ficar faixas vazias em dois lados. O melhor para logótipos. |
| **No repeat** | Uma cópia no seu tamanho. |
| **Repeat** | A imagem repete-se em mosaico pelo elemento. Bom para padrõ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.

| **Background effect** | O que os visitantes veem | Definições |
|---|---|---|
| **Simple image** | A fotografia desloca-se com a página. Esta é a predefinição. | nenhumas |
| **Fixed image** | A fotografia fica parada enquanto o conteúdo se desloca por cima. | nenhumas |
| **Parallax image** | A fotografia desloca-se mais devagar que o conteúdo. | **Parallax speed** (0 a 100; escolher **Parallax image** define 20 quando é 0), **Parallax mode** (**Fixed** ou **Local**), **Disable on mobile** (ecrãs com menos de 481 px de largura) |
| **Gradient** | Uma mistura de duas cores, sozinha ou sobre a fotografia. | **Start color**, **End color**, **Gradient direction** (1 a 360 graus; 180 corre de cima para baixo), **Start position**, **End position** |
| **YouTube video** | Um vídeo sem som toca enquanto a secção está no ecrã e pausa quando sai da vista. | **YouTube video URL**, **Start time in seconds**, **Stop time in seconds**, **Video options** |

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](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento#recipe-a-taller-section).
- **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](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/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](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia): defina a cor do título sobre a sua fotografia e verifique o contraste.