Studio Theme - How to add a background image to header and/or footer

Store Design
, ,

Topic summary

Adding background images to the Studio theme’s header and footer via custom CSS in base.css. A provided snippet sets background images for header.header and footer.footer and uses background-size: 100%.

Key implementation: Paste CSS under Assets → base.css with your image URLs. The example uses a Shopify CDN image link and applies only at @media screen and (min-width: 990px).

Outcome: The original poster confirmed success on desktop and noted the code already covers both header and footer.

Follow-up questions:

  • How to add backgrounds to other sections: requested, but no instructions provided yet.
  • Mobile not showing the image: reported; likely because the CSS only runs at widths ≥990px (desktop breakpoint). Mobile-specific CSS wasn’t provided in the thread.
  • Where to get an image URL: asked; the example uses a CDN URL, but guidance on obtaining one wasn’t answered.

Status: Partially resolved (desktop header/footer working). Open items: mobile support, extending to other sections, and sourcing image URLs.

Note: The CSS code snippet is central to understanding the solution.

Summarized with AI on December 21. AI used: gpt-5.
1

Please advise. I’m looking to add a background image behind my logo/menu in the header section. Not sure the best way to go about.

2

Hello @Tgunwall

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

3

squashcancer

4

Hi @Tgunwall ,

This is Kate 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:

@media screen and (min-width: 990px) {
    header.header {
        background: url("https://cdn.shopify.com/s/files/1/0651/6713/0857/files/Brighten_Their_Day.png?v=1670810725&width=375") no-repeat;
        background-size: 100%;
    }
    footer.footer {
        background: url("https://cdn.shopify.com/s/files/1/0651/6713/0857/files/Brighten_Their_Day.png?v=1670810725&width=375") no-repeat;
        background-size: 100%;
    }
    
}

NOTE: You can change the image URL to match your website.

I hope it would help you
Best regards,

Kate | PageFly

2 Likes
5

It worked perfect! Thank you!

I assume I can do the same for the footer as well? (With another background image)

2 Likes
6

Hi @Tgunwall ,

Yes. My code above is used for footer and header already. You can change the url

Best regards,

Kate | PageFly

7

Never mind… I see you gave me the code for both! Thank you again.

8

Hi Kate. This is really useful thanks, how could I add a background to the other sections on my website? Sorry I don’t have much experience with html code.

9

Hi Kate, I have used your code for my website and it works great on desktop. However it doesn’t show my image on mobile version. Can you please help with this? Thank you :folded_hands:

10

Hi there, Kate just looking at this for my website too. Just trying to figure where to get a URL image from that I need to use? Most images I download to my desktop. If I put the whole code in it works with the link you have.

Cheers Jason.