--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'Give a section a colour, photo or gradient background | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Fill a section with a colour, a photo, a gradient, a parallax image or a YouTube video' tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Give a section a colour, photo or gradient background' description: 'Fill a section with a colour, a photo, a gradient, a parallax image or a YouTube video' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/design/backgrounds' articleSection: 'Design guides' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/backgrounds' description: 'Fill a section with a colour, a photo, a gradient, a parallax image or a YouTube video' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Give a section a colour, photo or gradient background. Fill a section with a colour, a photo, a gradient, a parallax image or a YouTube video Learn DXPR BuilderBuild pagesStyle your elementsDesign guides ## In this guide Related guides - [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) You can fill any section with a colour, a photo or a gradient. Colour and photo come from the **Style** panel, which sections, rows, columns and elements all have. Sections add a **Background effects** panel for gradients, fixed and parallax photos and YouTube video. The example builds a navy section with a city photo, white text and a gradient on top. The video adds a photo behind a section, then covers it with a gradient. ## Add a colour and a photo 1. Click **Add Elements** in the empty content area and pick **Section** from the **Layout** tab. 2. Hover the section and open **More > Settings**. 3. Open the **Style** panel. 4. Pick a dark navy swatch for **Background**. 5. Pick white for **Font color**. 6. Under **Background image**, click **Select Image**. Search the media library, tick a photo and click **Insert selected**. 7. Set **Background style** to **Cover**. 8. Set **Background position** to **Center center** and click **Save**. 9. Click **+** on the section and pick **Text** from the **Content** tab. 10. Type a heading, such as `Evening lectures`, and one line below it. Set the heading to **Heading 2** and centre both lines in the editor toolbar. 11. Open the **Style** panel, set **Font color** to white and click **Save**. ## Add a gradient 1. Hover the section and open **More > Settings** again. 2. Open the **Background effects** panel and set **Background effect** to **Gradient**. 3. Pick a **Start color** and an **End color**, then click **Save**. 4. Click **Save** on the toolbar, open the view menu (the eye icon) and choose **Preview**. ## What you see After the first steps, the photo fills the whole section behind the white heading. **Cover** crops what does not fit, and **Center center** keeps the middle of the photo in view. The navy colour shows only while the photo loads or where the photo does not reach. The gradient blends from the start colour at the top to the end colour at the bottom. It sits on top of the photo. Opaque colours cover the photo completely; colours with some transparency let it show through. ## Settings ### Style panel (every section, row, column and element) | Setting | What it does | Default | |---|---|---| | **Background** | A fill colour from the colour picker or a theme swatch | None | | **Background image** | A picture from the media library, chosen with **Select Image** | None | | **Background style** | **Cover** fills the element and crops; **Contain** shows the whole picture and may leave gaps; **No repeat** shows it once at its own size; **Repeat** tiles it | **Theme defaults** | | **Background position** | Which part of the picture stays in view when it is cropped, such as **Center center** or **Left top** | **Theme defaults** | When AI image generation is set up, **Background image** also takes a prompt. See [AI image generation](/hc/documentation/learn-dxpr-builder/ai/image-generation). ### Background effects panel (sections only) | Background effect | What it does | Extra settings | |---|---|---| | **Simple image** (default) | The photo scrolls with the page | None | | **Fixed image** | The photo stays put while the page scrolls over it | None | | **Parallax image** | The photo moves slower than the page. See [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) for an example. | **Parallax speed**, **Parallax mode** (**Fixed** or **Local**), **Disable on mobile** | | **Gradient** | Two colours blend across the section, on top of the photo if there is one | **Start color**, **End color**, **Gradient direction** (180 degrees runs top to bottom), **Start position**, **End position** | | **YouTube video** | A muted YouTube video fills the section; tick **Loop** to repeat it | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Fixed and parallax effects move the photo you set in the **Style** panel. A YouTube video needs no photo. ## If you don't see the background - **There is no Background effects panel.** Only sections have it. Hover the section, not a row, column or element, and open **More > Settings**. - **The photo is cut off.** **Cover** crops what does not fit the section. Change **Background position** to keep the subject in view, or choose **Contain**. - **The gradient hides the photo.** The gradient sits on top, and opaque colours cover the photo. Lower the opacity of **Start color** and **End color** in the colour picker. - **The section shows no gradient.** A gradient needs both colours. Pick a **Start color** and an **End color**. - **The YouTube video does not play.** **YouTube video URL** is empty or not a link to one video. Paste the video's full address, such as `https://www.youtube.com/watch?v=` followed by its ID. ## What's next? - [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): let the background and the content run from edge to edge. - [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab): fade the text in as the section scrolls into view. - [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section): build a full page header with a parallax photo.