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

[Blueskiesskiesa]

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 🙂

[Uncle_ben]

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.

[Blueskiesskiesa]

Thank you! My URL is https://www.classicxglam.com/password

[abaptiste]

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 · 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

[Blueskiesskiesa]

It did not work 😞

[Blueskiesskiesa]

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]

@Blueskiesskiesa 

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

[Blueskiesskiesa]

Thank you so much!!

[KetanKumar]

@Blueskiesskiesa 

Thanks for your support and your compliments.

[forrester33]

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

[dyeheart]

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

[KetanKumar]

@dyeheart 

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

[dyeheart]

my url: www.dyeheartsg.com

[KetanKumar]

@dyeheart 

thanks for store url

let me know where do you have add?

[freehueman]

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

[freehueman]

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]

@freehueman 

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

[officialjewelry]

 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