Adding a background image to the password page on the narrative theme

Solved
Blueskiesskiesa
Tourist
9 0 4

Hi everyone!

I was hoping to get some help with the coding to get a background image added to the narrative theme. Any help would be appreciated!

Thanks

gasston
Explorer
38 8 16

hello @Blueskiesskiesa 

Welcome to the Shopify community! and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

Belgacem Ben ltaif
Web consultant /Shopify Expert/ Founder @Funkydev.io
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://benltaif.dev
https://funkydev.io/
0 Likes
KetanKumar
Shopify Partner
20367 2109 7659

This is an accepted solution.

Hello, @Blueskiesskiesa 

Welcome to the Shopify community!
and Thanks for your Good question.

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

 

body.password-template {
 background-color: transparent;
  background: url({{ 'nnatural_scrub_background.jpg' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 

 

 

also, please check attachment this flow step

Design Sky _ Edit _ Narrative _ Shopify.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
Blueskiesskiesa
Tourist
9 0 4

It did not work

0 Likes
Blueskiesskiesa
Tourist
9 0 4

I have:

.password-html {
//background-color: $color-main-bg;
background: url({{ 'nnatural_scrub_background.jpg' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

0 Likes
KetanKumar
Shopify Partner
20367 2109 7659

@Blueskiesskiesa 

Yes, i have update my above code can you please read again proper li ignore attachment 

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
Blueskiesskiesa
Tourist
9 0 4

Thank you so much!!

0 Likes
KetanKumar
Shopify Partner
20367 2109 7659

@Blueskiesskiesa 

Thanks for your support and your compliments.

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
0 Likes
abaptiste
Tourist
3 0 0

Is there an easier way  to find that one line of code where we place the password background image?

There are 14,000 lines I'm looking at lol

0 Likes