Motion theme add image background to header

Store Design

Topic summary

A user seeks guidance on adding an image background to the header in Shopify’s Motion theme.

Solution Provided:

  • Navigate to Online Store > Themes > Edit Code
  • Locate and modify sections/header.liquid by adding a custom CSS class to the main <header> tag
  • Add CSS styling in assets/theme.css (or base.css) with properties for background image, size, position, and repeat behavior
  • Upload the desired image via the Assets folder in the code editor and copy its URL to use in the CSS

Additional Options:
The responder offers further assistance with color overlays or improving logo/text visibility if needed.

Status: The original poster thanked the contributor, indicating the solution was helpful. The discussion appears resolved.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

How can I add an image background to header on motion theme?

Link

https://bafbombs.com/

Thanks

2

Hey @urbantis ,

Follow these Steps to Add a Background Image to the Header (Motion Theme):

  1. Online Store

  2. Theme > Edit Code

  3. Open: sections/header.liquid

Find the main tag (it may look like this):


Modify it to add a custom class like this:

```markup

4. Open: assets/theme.css (or base.css, depending on your version)

Scroll to the bottom and add this CSS:

```css
.custom-header-bg {
  background-image: url('https://cdn.shopify.com/s/files/1/XXX/your-image.jpg?v=123');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Replace the url(…) with your own image URL.

  1. To upload an image and get its URL:

  • In the code editor, go to the Assets folder.

  • Click “Add a new asset” and upload your image.

  • After uploading, click the image file to view it and copy its URL from the right sidebar.

That’s it! Refresh your storefront, and your header should now have a beautiful background image. Want to add a color overlay or make the logo/text stand out more? I can help with that too.

If you want help implementing this, please feel free to reach out — I’m happy to walk you through it or make the changes for you.

Best reagrds,

Rajat

Shopify Expert

3

Thanks.