How do I add a different background to each of these custom content sections?

sailorweeb97
Tourist
7 0 3

ttt shopify.png

 

How do I add a different background to each of these custom content sections? Thank you very much.

Note: I added the green line to the image so that I could separate the two images for the sake of this question. It's not actually on the site. 

 

Replies 10 (10)
KetanKumar
Shopify Partner
35891 3588 11605

@sailorweeb97 

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

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

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

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
suyash1
Shopify Partner
6687 801 1122

@sailorweeb97 - both sections need separate css code to add background, can you please share website link?

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly. From tomorrow for few days, I will be online at 1:00PM IST
KetanKumar
Shopify Partner
35891 3588 11605

@sailorweeb97 

thanks for it please add this code

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

#shopify-section-16201465810ebeeb55 {
    background: #87cefa; /* change color as you like */
    padding: 40px 0px;
    margin: 0;
}
#shopify-section-162014468955bb93f5 {
    background: #000000; /* change color as you like */
    padding: 50px 0px;
    margin: 0;
}

 

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
sailorweeb97
Tourist
7 0 3

@KetanKumar do you also know know  by chance how to make my looping hero video fully extend to the sides and meet the other sections?

KetanKumar
Shopify Partner
35891 3588 11605

@sailorweeb97 

do you mean like this?

KetanKumar_0-1620747683959.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
sailorweeb97
Tourist
7 0 3

Would you mind telling me what code I need to insert and where I need to insert it?

NerdCurator
Shopify Partner
348 65 98

@sailorweeb97 You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.scss.css file.

 

.custom-hero video{object-fit: cover; }

 

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
KetanKumar
Shopify Partner
35891 3588 11605

@sailorweeb97 

Yes, please this code

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

.hero_video {object-fit: 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