What's your biggest current challenge? Have your say in Community Polls along the right column.

How to make background image tile the entire page?

Solved

How to make background image tile the entire page?

Mercy_Paris
Tourist
4 0 3

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! 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9107 2176 2686

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

Made4uoRibe_0-1732398153948.png

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 4 (4)

devcoders
Shopify Partner
564 80 142

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;      
}

 

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

Made4uo-Ribe
Shopify Partner
9107 2176 2686

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

Made4uoRibe_0-1732398153948.png

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Mercy_Paris
Tourist
4 0 3

Thank you! 🙇🏼‍♂️

Made4uo-Ribe
Shopify Partner
9107 2176 2686

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.