How do I make my image background cover the entire website?

Store Design

Topic summary

A user needed help extending their website’s background image to cover the entire site instead of just half the front page.

Solution Provided:
A community member (from MS Web Designer) shared CSS code to be added to the bottom of the base.css file. The code targets two elements:

  • .gradient - applies the background image with specific positioning (center, no-repeat, cover)
  • #MainContent - removes any conflicting background images

Outcome:
The solution was successfully implemented and worked as intended. The user confirmed it “worked like a charm.”

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

I have the image background for half of the front page, but I need it to be over my entire website, how do I do this? My website is https://westaysmiling.com/.

2

Hi @westaysmiling

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.gradient {background-image: url(https://cdn.shopify.com/s/files/1/0752/2274/5376/files/darkblueskybg.jpg?v=1685584400) !important;background-position: center; background-size: cover; background-repeat: no-repeat;}

#MainContent {background-image: none !important;}

Regards,

San

3

Thank you, worked like a charm.