How to add a custom background image to any Shopify theme (no apps, 2026 update)

Tired of the plain white background of your theme? Having a neat-looking background image on your website can be a bold way to establish your brand: a well thought beautiful image, abstract or not, carries power with it.

A Shopify background image is just CSS on the page. You add a small section, pick the photo in Customize and Shopify prints a resized URL. You do not copy a Files link. You do not edit theme.liquid. Last tested on Dawn in 2026. Same idea on Sense, Craft, Spotlight, Taste, Refresh and most Online Store 2.0 themes.

I rewrote this because the old snippet used a hardcoded URL and !important. Theme updates would wipe it. This version lives in a section, so after the first paste you only use the theme editor. No app, no extra JS from a third party.

Works on any OS 2.0 theme that lets you add sections. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.

What a Shopify background image actually is

Shopify does not have a single "site background" switch that paints every pixel. Dawn and other OS 2.0 themes are a stack of sections. Header, announcement bar, image banner, product grid and footer each have their own background. If those sections are solid white, an image on the body sits behind them. You will not see it until a section is transparent or you put the image on that section itself.

Think of the body as the wall and each section as a card on top of the wall. Paint the wall and you only see it in the gaps. Paint a card and only that block changes. That is why this tutorial has two methods: one image for the whole page, and one image for a single section (a collection block, an About block, whatever you pick).

Shopify's image_url: width: 1920 filter is the other reason this is better than pasting a Files URL. The CDN serves a 1920px-wide version instead of the raw upload. A 4000px PNG as a background will tank mobile LCP. I would still keep the source file under about 500kb when you can. WebP is fine. Shopify will convert it.

How to add a background image to the whole Shopify page

1. In the Shopify admin search bar, type Online Store and click the result.

   

2. On the theme card, click the 3 dots, then click Edit code.

   

3. In the left file list, right-click the sections folder and click New File.

   

4. Name the file exactly:

   ezfy-background-image.liquid

   Include the .liquid. If the name is wrong, Shopify will not load the section.

   

5. Paste this into the new file, then click Save. This is the whole section, schema included:

   

If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.

How to upload the image in Customize

The section has no visible content. It only prints a style tag. If it looks like a blank block in the editor, that is normal.

1. Still in Edit code, click the Shopify bag icon on the far left, then click Customize theme.

   

2. Click Add section, then click Background image.

   

3. Click the new Background image section. Upload your photo in the Background image picker. Save.

   

You should see the photo behind the page. If other sections are solid white, they will cover it. Hide or make those blocks transparent, or use the one-section method below.

Add this section on the templates where you actually want the image (home, collection, product). If you only add it on the homepage, other templates stay plain.

How to add a background image to one Shopify section

Use this when you only want the image on one block, not behind the whole page.

1. In Edit code, open the .liquid file of the section you want (for example a collection tabs section or an image-with-text file).
2. In that file's {% schema %} settings array, add this object. Keep the comma so the JSON stays valid:

   { "type": "image_picker", "id": "section_bg_image", "label": "Section background image" }

3. Near the top of that same section file, paste the Liquid from this gist file (it is the second file on the gist above):

   ezfy-section-background.liquid

   That block targets #shopify-section-{{ section.id }} so only this section gets the image, not the whole page.

4. Save. Then go to Customize, click that section and upload the image in Section background image.

I used this on a collections-with-tabs block in the old version of this post. Same idea if you already installed Collections with tabs.

If the text box covers your background image

This is the usual About-page problem. You put an image on the section, then a white writing box still sits on top of it. The image is there. The inner container is just opaque.

You have two options. Do this in Customize: click that section, scroll to Custom CSS, paste one of these, then save.

Hide the writing box:

.page-width, .image-with-text__content, .rich-text__wrapper, .content-container { background: transparent; display: none; }

Keep the text, make the box transparent and add a dark overlay so the words stay readable:

& { position: relative; } &::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: none; } .page-width, .image-with-text__content, .rich-text__wrapper, .content-container { background: transparent; } h1, h2, h3, p, a, .rte { color: #fff; }

The & is Shopify's Custom CSS shortcut for that section. Darken the overlay by raising 0.45 toward 0.7 if the photo is busy. If nothing changes, tell me the theme name. Paid themes sometimes use a different inner class.

Why this is better than copying a CDN URL

The 2024 version of this tutorial had you upload under Content > Files, copy the URL and paste it into a snippet, then {% include %} that snippet in theme.liquid. For one section it used Custom CSS with > * { background: url("replaceme.jpg") !important; }.

That still "works". I would not do it now. A Files URL is the original file, not a resized one. !important on every child is fragile when the theme updates. Editing theme.liquid is the file people forget they touched. The section method keeps the picker in Customize. After setup, you never open code to swap the photo.

If you do not see the background image

Check the section file name. It has to be exactly ezfy-background-image.liquid.

Check that you added Background image in Customize and that the picker is not empty. Empty picker means the style tag never prints.

Check that the section is on the template you are viewing. Homepage only means collection pages stay blank.

If the body image is there but you still see white, the sections on top are opaque. Either make those section backgrounds transparent in the editor, or use the one-section method on the block you care about. If a white writing box is sitting on the image (common on About pages), use the overlay CSS in the section above.

Hard refresh the storefront. Theme editor save is required before the live page updates.

background-attachment: fixed can look odd on iPhone. Safari often ignores it. The image still shows. It just will not stay pinned while you scroll. That is a browser thing, not a broken theme.

If you are on a paid theme and the selector does nothing, tell me the theme name. #shopify-section-{{ section.id }} is Shopify's wrapper. Most OS 2.0 themes use it. Vintage OS 1.0 themes are a different job.

If a huge background is slowing the store, compress the file first. I wrote about image crop issues here: Fixing broken responsive images on Shopify. Same cluster if you are also swapping brand assets: Add custom fonts to Shopify and How to change the header logo on your Shopify theme.

If you get stuck, tell me the theme name and whether you want the whole page or one section. That usually solves it.