Show details for Custom Backgrounds with Content Templates and CSS

Custom Backgrounds with Content Templates and CSS

Give content template sections a background picture, a brand pattern or a gradient - with the built-in Background image option or reusable CSS backgrounds.

Custom Backgrounds with Content Templates and CSS

Give content templateFunctionality provided by Infigo allowing you to create and format site content without directly interacting with HTML. sections a background picture, a brand pattern or a gradient - with the built-in Background image option or reusable CSS backgrounds.

Guide4 min readVideo9-step guideUpdated 15 Oct 2026

Overview

A section in a content template can carry a background picture, a patterned image or a gradient. There are two ways to set one up, and you can mix them on the same page.

What it does

  • Picture backgrounds with no code - upload an image straight onto a section with Background image.
  • Reusable backgrounds - define a pattern or gradient once in CSS and apply it to any section by choosing Background color: Custom 1 to Custom 4.
  • Control over fit - choose how the picture fills the section, where it is anchored and whether it repeats.

How it works

  • Background image - a section setting: set Background image? to Yes, upload a picture and choose Background Size, Background Positon and Background repeat.
  • CSS backgrounds - upload the image under Uploaded Resources in CSS OverrideAn area of Infigo where parts of the CSS code can be overriden with your own custom code, then add a rule for a Custom slot in your CSS file that points at it with url('{images}/your-file.png').
  • Custom slots - choosing Background color: Custom 3 adds the class has-background-custom-3, which your rule styles.

Which to use

  • Use Background image for a one-off picture on one section.
  • Use a CSS background for a pattern, texture or gradient you want on many sections or pages - change it once and it updates everywhere.

Good to know

  • {images}/ in your CSS is replaced with the address of your uploaded resources.
  • File names with special characters lose those characters on upload - use simple names.
  • Uploading a CSS file replaces the previous one. Download the current file first and add to it.
  • Set a contrasting Text colour on every section with a background, and check it on a phone - narrow screens crop wide pictures.

Before you begin

  • Prepare wide images (around 1920 pixels) and compress them so pages stay fast.
  • For CSS backgrounds you need to be comfortable writing a few lines of CSS.

Step-by-step

  1. Turn on Background image and upload your picture

    Open the content pageAdditional pages on your Storefront containing supplementary information. in Content Management > Content Pages (Body editor type Content Template Editor) and click the settings (cog) icon on a section. Set Background image? to Yes and click Upload under Background Image. JPG, PNG, GIF, WebP and SVG are accepted. Use a wide image (around 1920 pixels) and compress it first so the page stays fast.

    Background image?: Yes, then Upload

    Background image?: Yes, then Upload
  2. Choose how the picture fills the section

    Background Size controls scaling: Fill covers the whole section (cropping the edges if needed), Fit shows the whole picture. Background Positon sets which part stays in view when it is cropped, and Background repeat tiles small images.

    Background Positon, Background Size and Background repeat

    Background Positon, Background Size and Background repeat
  3. Make the text readable on the picture

    Set Text colour to contrast with the picture - here White on a dark image. Click Ok, then Save and Continue Edit.

    Text colour: White

    Text colour: White
  4. Check the picture on your storefront

    Open the page on your storefront. The section shows your picture behind its content and scales with the browser width. Check it on a phone as well: a narrow screen crops more of a wide picture.

    The section with its background picture

    The section with its background picture
  5. For a reusable background, upload the image as a CSS resource

    Go to Content Management > CSS Override. Under Uploaded Resources, click Choose a file, pick your image and click Upload. Avoid special characters in the file name - they are removed on upload. You can refer to any uploaded resource from your CSS file by name.

    Uploaded Resources: brand-pattern.png

    Uploaded Resources: brand-pattern.png
  6. Add background rules for a Custom slot to your CSS file

    In your CSS file, add a rule for .has-background-custom-3 (or any free slot) that points at the image with url('{images}/brand-pattern.png') - {images}/ is replaced with the address of your uploaded resources. Add background-size: cover so it fills the section. A slot can also hold a gradient, as .has-background-custom-4 does here, with no image at all. Add !important to each line, then upload the file under Upload a new CSS file on the same page (uploading replaces the whole file, so keep your existing rules).

    Custom 3 = pattern image, Custom 4 = gradient

    Custom 3 = pattern image, Custom 4 = gradient
  7. Pick the slot on a section

    Back on the content page, open a section's Configure window and set Background color to Custom 3. Leave Background image? set to No - the picture comes from your CSS. Set a contrasting Text colour.

    Background color: Custom 3

    Background color: Custom 3
  8. Use another slot for a gradient

    Do the same on another section with Custom 4. Click Save and Continue Edit, then Clear cache in the admin top bar.

    Background color: Custom 4

    Background color: Custom 4
  9. Check the CSS backgrounds on your storefront

    Both sections now use the backgrounds from your CSS file. Because the backgrounds are defined once, any section on any page can reuse them by picking the same slot, and changing the CSS file updates them all.

    Custom 3 (pattern) and Custom 4 (gradient) sections

    Custom 3 (pattern) and Custom 4 (gradient) sections

Video transcript

Overview video

0:00 Custom backgrounds for content sections

0:03 Sections on a content page can have a background picture, a brand pattern, or a gradient. There are two ways to add one.

0:11 The first is built in. A section's Background image setting lets you upload a picture directly, with no code.

0:19 The picture sits behind the section's text and scales with the page.

0:24 The second uses your CSS file. A pattern image or a gradient is defined once, against one of the Custom slots.

0:32 Any section can then use it by choosing that slot as its background colour. Here, one section uses a pattern, and the next a gradient.

0:41 It's built from the section settings in the content template editor, and CSS Override. The step-by-step guide on this page shows both methods.

Step-by-step video

0:00 Add custom backgrounds to content sections

0:04 In this tutorial we'll add backgrounds to content page sections in two ways: with the built-in background image setting, and with reusable backgrounds defined in your CSS file.

0:15 Open your content page and click the cog on a section. Set Background image to Yes, then click Upload and choose your picture. Use a wide image and compress it first.

0:26 Background Size controls the scaling. Fill covers the whole section. Position sets which part stays in view, and repeat tiles small images.

0:36 Set Text colour to contrast with the picture, here white. Click Ok, then Save and Continue Edit.

0:43 On your storefront, the section shows the picture behind its text.

0:48 For a background you'll reuse, go to Content Management, then CSS Override. Under Uploaded Resources, upload your image.

0:57 In your CSS file, add a rule for a free slot, such as has-background-custom-3, pointing at the image with images, slash, and the file name. Add background-size cover. Slot four here holds a gradient, with no image at all. Then upload the CSS file.

1:13 Back on the page, open a section's settings and set Background color to Custom 3.

1:19 On another section, choose Custom 4. Save, then clear the cache.

1:24 Both sections now use the backgrounds from your CSS file, and any other section can reuse them.

1:31 That's it. Use the background image setting for a one-off picture, and a Custom slot for anything you want to reuse across your storefront.

Search terms

Alternate Search Phrases
custom backgroundbackground imagesection backgroundbackground patterngradient backgroundcss override imagescontent template backgroundhas-background-custom
Guide | Custom Backgrounds with Content Templates and CSSLast updated: 15 Oct 2026
Incomplete
Start the conversation! Have a question? Tutorial out of date? Let us know HERE!