Adding Background Images to Header and Main Body in Debut Theme

Store Design
1

Hello,

I’m trying to add background images for both my header and my main body in the Debut Theme.

I have tried the suggestions I’ve found on both here and YouTube but they don’t seem to work. They’re from 12 months ago so not sure if the Theme is changed since then.

I save the assets then add the code with the url but when I go onto my site then nothing has changed.

Thanks

Dan

2

Hi @DanTreatyPie ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

@DanTreatyPie

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.

4

Thank you for the replies. My URL is treatypie-delivery.myshopify.com

I have previously used a custom theme but I’m now moving over to Debut.

1 Like
5

@DanTreatyPie

thanks for more details can you try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
#shopify-section-header {
    background: url("https://cdn.shopify.com/s/files/1/0290/3117/0153/files/Lick.jpg?v=1646922648"); /* chanage image as you like */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

header.site-header.logo--center {
    background: transparent;
}

.site-header__mobile-nav {
    background: transparent;
}

body {
    background: url("https://cdn.shopify.com/s/files/1/0290/3117/0153/files/Lick.jpg?v=1646922648"); /* chanage image as you like */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
6

Hi @DanTreatyPie ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
#shopify-section-header {
    background-image: url(//cdn.shopify.com/s/files/1/0290/3117/0153/files/Lick_300x300.jpg?v=1646922648);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.drawer-page-content {
    background-image: url(//cdn.shopify.com/s/files/1/0290/3117/0153/files/Lick_300x300.jpg?v=1646922648);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.site-header,
.site-header__mobile-nav {
    background-color: transparent !important;
}

NOTE: You can change url to suitable for theme

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.