Motion theme add image background to header

[urbantis]

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

Link

https://bafbombs.com/

Thanks

[rajweb]

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 <header> tag (it may look like this):

<header class="header ...">

Modify it to add a custom class like this:

<header class="header custom-header-bg">

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

Scroll to the bottom and add this 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.

5. 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

[urbantis]

Thanks.