Add an image as background in my whole site Im using Debut theme

Store Design
1

Hi! Is there a way to add a background image in my whole site? Im using the debut theme

1 Like
2

@koaactivewear

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @KetanKumar !! Thank you very much for your prompt reply! My site is https://koaactivewear.com/

Thanks!! :slightly_smiling_face:

1 Like
4

@koaactivewear

thanks for store url can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset-> upload your image
  3. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
body {
    background: url({{ 'your image name here.jpg' | asset_url }});
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
1 Like
5

Check this solution
https://community.shopify.com/c/Shopify-Design/Adding-a-background-image-to-the-Debut-theme/m-p/536336#M136468

In short:

  1. Upload the image to shopify. Go to Settings -->Files
  2. Once image uploaded, copy the link URL and replace the URL you see in the code below.
  3. Go to theme.css and place the code (with your unique image URL) at the very bottom of the file.
body {
background: url(https://cdn.shopify.com/s/files/1/1/1/files/your-image.jpg);
}
1 Like
6

Hi @KetanKumar and @Nick_Marketing ! I tried both solutions but I don’t know why I’am still not able to see the background. I’m probably doing something wrong

1 Like
7

For testing purposes, try adding this external background, see if it reflects on the site

body {
    background: url(https://www.toptal.com/designers/subtlepatterns/patterns/fishnets-and-hearts.png) !important;
}

Also, for previously mentioned solutions, ensure you copy and replace the image link. See screenshot.

2021-08-12 22_46_42.png
2021-08-12 22_46_42.png958×184 5.02 KB

The link should look something like this https://cdn.shopify.com/s/files/1/08/57/34/files/C0DB878

8

@koaactivewear

oh sorry can you please let me know where do you have add code

9

Sure! @KetanKumar I added the part that @Nick_Marketing sent and the image he sent does work. So I guess it’s maybe my image that is not working.

test
test1678×855 184 KB

Screen Shot 2021-08-12 at 10.12.07 PM.png
Screen Shot 2021-08-12 at 10.12.07 PM.png1635×479 121 KB

10

@Nick_Marketing & @KetanKumar thank you very much for your help! Both solutions worked! I just deleted the image and added another one and it worked!

2 Likes
11

@koaactivewear

its my pleasure to help us