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
1 Like
@DanTreatyPie
yes, please try this code
- Go to Online Store->Theme->Edit code
- 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;}
1 Like
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
@DanTreatyPie
yes your have use same code that theme
1 Like
@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.
1 Like
@KetanKumar
I have tried this code on base.css but nothing seems to be happening after I save.
oh may be something is missing code can you some me
1 Like
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.
1 Like
@DanTreatyPie
no rush thanks for update can you please send Crave theme your store url?
1 Like
@KetanKumar
My store URL is treaty-pie.myshopify.com and I have Crave theme published now.
1 Like
@DanTreatyPie
add you code base.css file
1 Like
@KetanKumar
I just added it to base.css then but nothing has happened?
1 Like
@DanTreatyPie
yes, please confirm this look
1 Like
@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.
1 Like
@DanTreatyPie
can you try this code
- Go to Online Store->Theme->Edit code
- 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;
}
1 Like
@KetanKumar that has worked! Thank you very much!
1 Like
@DanTreatyPie
its my pleasure to help us
1 Like
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
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?
