Solved

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

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 🙂

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

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

View solution in original post

Replies 18 (18)

Uncle_ben
Shopify Partner
51 10 17

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

KetanKumar
Shopify Partner
36839 3635 11972

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 😞

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

KetanKumar
Shopify Partner
36839 3635 11972

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

KetanKumar
Shopify Partner
36839 3635 11972

@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
forrester33
Visitor
3 0 0

Super helpful! Building on what you've already provided, how can I add opacity to the background image itself (not the entire page)?


dyeheart
Tourist
3 0 2

anyone able to assist me on how to add the background?

KetanKumar
Shopify Partner
36839 3635 11972

@dyeheart 

yes please flow above step if now able to this please share store url so i will check and guide 

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
dyeheart
Tourist
3 0 2
KetanKumar
Shopify Partner
36839 3635 11972

@dyeheart 

thanks for store url

let me know where do you have add?

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

Please help! Not working for me. I'm using Narrative Theme. my url is Freehueman.com

freehueman
Visitor
2 0 1

currently what code looks like:

 

.password-html {
//background-color: $color-main-bg;
body.password-template {
background-color: transparent;
background: url({{ 'password_background.png' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}

KetanKumar
Shopify Partner
36839 3635 11972

@freehueman 

do you have your css file to liquids that should be work

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
officialjewelry
Visitor
3 0 0

 Hi Im using Debut theme and there is no password.html in the theme.css anywhere ( I searched for it exactly how it looked) so I don't know where to paste that code 😕 Please help if you can, my website is www.officialkollection.com@KetanKumar