How can I add a background image to the header and body in the Crave Theme?

[DanTreatyPie]

Hello,

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

I have tried to input the code I used for the Debut theme to insert the same images but there is theme.css file in the assets to input the code into.

Can someone tell me how do I this please or if it is even possible in the Crave Theme.

My URL is treaty-pie.myshopify.com

I still have the Debut theme published at the moment as I need to fix the Crave theme before I can publish.

Thanks in advance for your help.

Dan

[KetanKumar]

@DanTreatyPie 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.announcement-bar {background: transparent !important;}
footer.site-footer {background: transparent !important;}
.site-footer__hr {display: none !important;}

[DanTreatyPie]

Hi @KetanKumar 

There doesn't seem to be a theme.css file in any of the code?

I have now published the theme too, if that is easier to work with.

treaty-pie.myshopify.com

Thank you for your help

[KetanKumar]

@DanTreatyPie 

yes your have use same code that theme 

[DanTreatyPie]

@KetanKumar 

I have no theme.css file

My file first message I made an error. I should have said there is no theme.css file to use.

[KetanKumar]

@DanTreatyPie 

base.css

[DanTreatyPie]

@KetanKumar 

I have tried this code on base.css but nothing seems to be happening after I save.

[KetanKumar]

oh may be something is missing code can you some me 

[DanTreatyPie]

HI @KetanKumar 

Sorry for the late reply, I have been on holiday this week.

The code I am using in theme.css file in Debut is:

body {
background: url("https://cdn.shopify.com/s/files/1/0290/3117/0153/files/CLOUD_BACKGROUND-2.png?v=1649068974");
background-attachment: fixed;
}

#shopify-section-header {
background: url(""); /* 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/CLOUD_BACKGROUND-2.png?v=1649068974"); /* chanage image as you like */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

I have been trying to use the same in Crave.

[KetanKumar]

@DanTreatyPie 

no rush thanks for update can you please send Crave theme your store url?

[DanTreatyPie]

@KetanKumar 

My store URL is treaty-pie.myshopify.com and I have Crave theme published now.

[KetanKumar]

@DanTreatyPie 

add you code base.css file

[DanTreatyPie]

@KetanKumar 

I just added it to base.css then but nothing has happened?

[KetanKumar]

@DanTreatyPie 

yes, please confirm this look

[DanTreatyPie]

@KetanKumar 

On my phone and my laptop it still looks like the attached image below.

Why does yours look different?

Both my devices are Apple, not sure if this makes a difference.

[KetanKumar · Accepted solution]

@DanTreatyPie 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.gradient {
    background: transparent;
}
body {
background: url("https://cdn.shopify.com/s/files/1/0290/3117/0153/files/CLOUD_BACKGROUND-2.png?v=1649068974") !important; /* chanage image as you like */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

[DanTreatyPie]

@KetanKumar that has worked! Thank you very much!

[KetanKumar]

@DanTreatyPie 

its my pleasure to help us 

[Camohog]

Hello friend, I have used this code that has worked for my website as well. I just have one question regarding it. Is it possible to have a gradient/color then be displayed after the image has been displayed once as the user continues to scroll down the page?

I am running into the issue of the image being displayed and then repeating which does not look good. Please let me know

[rmt_cntrl]

What about for a theme that has an Age Verification built in. Can we override & replace an image instead of a color in CSS?

[GoldenPath]

This code worked for me too but I can't find how to upload my own artwork for the background image. How do I do that?