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

Store Design
1

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 :slightly_smiling_face:

2 Likes
2

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.

3

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
Design Sky _ Edit _ Narrative _ Shopify.png1427×596 159 KB

2 Likes
4

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

1 Like
5

It did not work :disappointed_face:

6

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

7

@Blueskiesskiesa

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

2 Likes
8

Thank you so much!!

9

@Blueskiesskiesa

Thanks for your support and your compliments.

10

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

11

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

12

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

1 Like
13

@dyeheart

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

1 Like
14

my url: www.dyeheartsg.com

1 Like
15

@dyeheart

thanks for store url

let me know where do you have add?

16

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

17

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

1 Like
18

@freehueman

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

19

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 :confused: Please help if you can, my website is www.officialkollection.com . @KetanKumar