How to make background image tile the entire page?

[Mercy_Paris]

Hi there,

I'm having issues to tile my background for the entire site. Instead if tiles again for each section.

I'm looking to have only one tile for the whole site, with the image tiling 5x vertically (hence size:20%) on any screen.

My theme is spotlight, and the code I added to theme.liquid is the following:

<style>
.page-width {
background-image: url("https://cdn.shopify.com/s/files/1/0900/9286/3833/t/3/assets/background_350.png?v=1732380736") !important;
max-width: 100% !important;
background-size: 20%;
}
</style>

You can preview my site here:

https://izlri502ca9pkir2-90092863833.shopifypreview.com

Thank you for the help! 

[devcoders]

Hello @Mercy_Paris 

Apply background to the entire body 

body {
  background-image: url("https://cdn.shopify.com/s/files/1/0900/9286/3833/t/3/assets/background_350.png?v=1732380736");
  background-repeat: repeat;      
  background-size: 20% auto;         
  background-attachment: fixed;      
}

[Made4uo-Ribe · Accepted solution]

Hi @Mercy_Paris 

Try this one.

Replace to your current code. 

<style>
.gradient {
background-image: url("https://cdn.shopify.com/s/files/1/0900/9286/3833/t/3/assets/background_350.png?v=1732380736") !important;
max-width: 100% !important;
background-size: 20%;
}
</style>

And Save. 

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Mercy_Paris]

Thank you! 🙇🏼‍♂️

[Made4uo-Ribe]

Welcome, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!