How can I add a background image to the homepage on the Colorblock theme?

Store Design
, , , ,

Topic summary

A user working with Shopify’s Colorblock theme needed help adding a homepage background image and centering their navigation menu.

Background Image Solution:

  • Initial attempts failed when code was placed at the bottom of base.css
  • Success achieved by placing CSS code at the TOP of the base.css file:
body {
  background: url("image_url_path") no-repeat important!;
  background-size: cover important!;
}

Menu Centering:
Added to bottom of base.css:

.header__inline-menu {
  justify-self: center important!;
}

Full-Page Image Display:
To show the entire background image without adding sections, this code was added to the TOP of base.css:

#MainContent {
  min-height: 100vh;
}

All solutions were successfully implemented. The key issue was CSS placement—background styling needed to be at the file’s top, while menu styling went at the bottom.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi all!

I’m using the colorblock theme and trying to add a background image only on the homepage. I’ve read through previous questions and followed the codes shown, but nothing seems to be working. Any suggestions?

Also, I’ve been trying to get my menu on the same line as my logo and have slightly succeeded (by following codes suggested to others) but now my menu text seems to be anchored to my logo now and overlays it. I’m not sure how to center the menu and have the logo on the left side. I have no coding knowledge so this is all pretty new to me.

Any help would be greatly appreciated!

coteriecollective.myshopify.com

password: teufra

2

Hey @summer11

You need to follow these steps.

1)Go to Online Store
2)Edit Code
3)Add the code below in theme.liquid above
1 Like
3

That worked! Thank you so much!

4

@summer11

To make header menu center follow this steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code

  2. Find Asset > base.css and paste this at the bottom of the file:

.header__inline-menu{
  justify-self: center !important;
}

This works well for your site.

If you apply margin then it would be change design in mobile or desktop view

So try this

5

You’re Welcome. I would appreciate it if you Mark it as Solution.
Have a Great day! :slightly_smiling_face:

6

Sorry, one more question. Do you have any advice on the background image?

7

Hi @summer11 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

body {
    background: url("url_image_path") no-repeat !important;
    background-size: cover !important;
}

I hope it would help you
Best regards,

Richard | PageFly

8

Unfortunately that didn’t work. I also tried it on the Dawn theme just to see if it was specifically Colorblock that was giving me trouble, but it didn’t work for Dawn either.

1 Like
9

Hi @summer11 ,

Sorry for the confusion here. Can you paste that code on the TOP of the base.css file?

PageFlyRichard_0-1677503603927.png
PageFlyRichard_0-1677503603927.png1916×920 271 KB

I hope it would help you
Best regards,

Richard | PageFly

10

Perfect! Thank you so much for clarifying. One last question if you don’t mind, I’d like the homepage to basically be just the full image with the logo on top as is and a transparent footer on the bottom. Is there any way to show the entire image without having to add various sections? I’d like to be able to scroll the page.

11

Hi @summer11 ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:

#MainContent {
    min-height: 100vh;
}

I hope it would help you
Best regards,

Richard | PageFly

12

Yes, perfect! Thank you so much for your help!

1 Like