Solved

Changing background image in the Debut theme

maggiemaze
New Member
7 0 0

Hey!

I'm trying to add a custom background image to my shop but it doesn't work out 😕

I saw some tutorials that mention the Theme.scss.liquid file under the Assets menu, but this asset is missing for some reason.

Even when I try adding a new copy of the Debut template this theme.scss is nowhere to be found.

 

Any ideas what can be done?

Accepted Solution (1)
PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

 

Is this what you wanna achieve?

Screen Shot 2021-01-18 at 11.17.08.png

This is a short video of the effect when scrolling: http://somup.com/crVF6Do3fJ

If this is it, then the steps are:

- Go to your theme and click in Actions > Edit Code
- Add the image you wanna use as background to the Assets folder by clicking in Add a new asset:

Screen Shot 2021-01-18 at 11.25.09.png

 My asset was named bananas.png

Now open your image clicking on it in the left column of the code editor and right click on the image to open the contextual menu

Screen Shot 2021-01-18 at 11.38.33.png

And click on open image in a new tab (this is with google chrome)
In the new tab where the image opened, copy the url from the browser address bar

Now open the Assets/theme.css file and copy the following at the end of the file, replacing the image url with yours:

 

body {
    background: url(https://cdn.shopify.com/s/files/1/0113/4044/7844/t/7/assets/bananas.png);
    background-attachment: fixed;
}

 

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

View solution in original post

Replies 15 (15)

Hardik29418
Shopify Partner
2843 406 1070

try to find theme.css file.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
maggiemaze
New Member
7 0 0

Ok, I see the theme.css file.

What should I change there to add a custom background image?

PeanutButter
Shopify Partner
385 67 181

@maggiemaze can you share your shop's url and describe a little more what you want to achieve?
When you say you want to add a background image to your shop, do you mean to the BODY (the background of all the shop in all the pages).
Also, can you share the image you want to add?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
maggiemaze
New Member
7 0 0

@PeanutButter  Hi!
Correct. I want the image to cover all the pages in the shop.

I still don't have the final image I wish to put there, but it can be any dummy image for now.

shop url: maggiemaze.myshopify.com

PeanutButter
Shopify Partner
385 67 181

Another question, do you want the image to stay fixed of to move upward as the user scrolls?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
maggiemaze
New Member
7 0 0

@PeanutButterStay fixed.

PeanutButter
Shopify Partner
385 67 181

ok, will send you solution tomorrow

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
maggiemaze
New Member
7 0 0

@PeanutButter  Thank you!

PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

 

Is this what you wanna achieve?

Screen Shot 2021-01-18 at 11.17.08.png

This is a short video of the effect when scrolling: http://somup.com/crVF6Do3fJ

If this is it, then the steps are:

- Go to your theme and click in Actions > Edit Code
- Add the image you wanna use as background to the Assets folder by clicking in Add a new asset:

Screen Shot 2021-01-18 at 11.25.09.png

 My asset was named bananas.png

Now open your image clicking on it in the left column of the code editor and right click on the image to open the contextual menu

Screen Shot 2021-01-18 at 11.38.33.png

And click on open image in a new tab (this is with google chrome)
In the new tab where the image opened, copy the url from the browser address bar

Now open the Assets/theme.css file and copy the following at the end of the file, replacing the image url with yours:

 

body {
    background: url(https://cdn.shopify.com/s/files/1/0113/4044/7844/t/7/assets/bananas.png);
    background-attachment: fixed;
}

 

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
maggiemaze
New Member
7 0 0

@PeanutButter 

It's working! 🙂

Thank you so much.

Last question: Do you know if there is a way to set the image to be centered instead of tiles?

 

 

maggiemaze
New Member
7 0 0

@PeanutButter  OK I managed to do it.

I used

background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;

Thank you!

PeanutButter
Shopify Partner
385 67 181

Nice!

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
lukefoster458
Visitor
1 0 0

It didnt work for me, when I tested the code it came back with an error.

koaactivewear
Tourist
7 0 5

Hi! I tried following the same steps for this, but my background image does not appear. I also have the debut theme

Hardik29418
Shopify Partner
2843 406 1070

Hello, @koaactivewear 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email