Solved

Can I add different background images to custom pages on Shopify?

Hailey22
Tourist
7 0 1

 

Theme: Brooklyn

Website link: https://pauaco-shop.co.nz/

Pages wanting background on: About PauaCo & Contact Us

 

I've been trying to add a background image to two custom pages I have made (About PauaCo & Contact Us). I've tried a few different codes from other question threads and I can't seem to get them to work. 

 

If someone could please give me a code/s and instructions on where to add them. 

 

Am I able to have a different background image on both pages? 

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Hailey22 

add this code and change image 

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

#pauaco-story {
    background: url(https://cdn.shopify.com/s/files/1/0600/7567/1735/files/AB_6_1944x.jpg?v=1631676917);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#contact-us {
    background: url(https://cdn.shopify.com/s/files/1/0600/7567/1735/files/AB_6_1944x.jpg?v=1631676917);
    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 4 (4)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Hailey22 

add this code and change image 

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

#pauaco-story {
    background: url(https://cdn.shopify.com/s/files/1/0600/7567/1735/files/AB_6_1944x.jpg?v=1631676917);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#contact-us {
    background: url(https://cdn.shopify.com/s/files/1/0600/7567/1735/files/AB_6_1944x.jpg?v=1631676917);
    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
Hailey22
Tourist
7 0 1

Hi @KetanKumar , 

 

Thank you for that. It works 🙂 

 

Do you know how to make the header transparent on those pages so the image is under it as well?

 

Thanks 

Hailey22
Tourist
7 0 1

Hi @KetanKumar , 

 

Can you help with the below??

 

Cheers

FaitheB
Visitor
1 0 0

Hi! Not sure if you got this answered already, but when your customizing your theme, you go to the color settings, and whatever color you want to be changed to be transparent, you simply remove the HEX code so it changes to say "None" or "Transparent." 

Hope this helps!