Solved

Background image instead of colour

DanTreatyPie
Excursionist
19 0 10

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an 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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 20 (20)

KetanKumar
Shopify Partner
36839 3635 11972

@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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

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
Shopify Partner
36839 3635 11972

@DanTreatyPie 

yes your have use same code that theme 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

@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.

 

Screenshot 2022-05-30 at 08.32.23.png

KetanKumar
Shopify Partner
36839 3635 11972

@DanTreatyPie 

base.css

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

@KetanKumar 

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

KetanKumar
Shopify Partner
36839 3635 11972

oh may be something is missing code can you some me 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

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
Shopify Partner
36839 3635 11972

@DanTreatyPie 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

@KetanKumar 

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

KetanKumar
Shopify Partner
36839 3635 11972

@DanTreatyPie 

add you code base.css file

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

@KetanKumar 

 

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

KetanKumar
Shopify Partner
36839 3635 11972

@DanTreatyPie 

yes, please confirm this look

KetanKumar_0-1654594008193.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

@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.

 

Screenshot 2022-06-07 at 17.53.47.png

KetanKumar
Shopify Partner
36839 3635 11972

This is an 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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DanTreatyPie
Excursionist
19 0 10

@KetanKumar that has worked! Thank you very much!

KetanKumar
Shopify Partner
36839 3635 11972

@DanTreatyPie 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Camohog
Visitor
1 0 0

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
Shopify Partner
1 0 0

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
Visitor
1 0 0

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?