Background Images on Pages

Solved
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)

Accepted Solutions
KetanKumar
Shopify Partner
25012 2502 9048

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 3 (3)
KetanKumar
Shopify Partner
25012 2502 9048

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

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