Debut password page background not showing

Store Design
1

Hello there,

I have set an image to show as my background when my password page is turned on. for some reason, the background image isn’t showing.

Can someone help me with this, please?

Thanks

Darcy

2

@Darcy1991

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hey,

My site URL is: www.insbrdnt.com

4

@Darcy1991

thanks but current your store not password protect how can i check.

5

Hey,

Yeah, I don’t need the password on right now.

I have been testing the password page and the image isn’t showing when I set the password page.

Is there any way you can fit this without the password page being on?

Thanks,

Darcy

6

Hey,

My password page is now on.

Please could you check why I am unable to use a picture as the background?

Thanks,

Darcy

7

@Darcy1991 - can you please share the password page link?

8

Hey, please see below:

www.insbrdnt.com

Thanks

9

@Darcy1991 - how did you add background? custom css or customizer? because I checked code and could not find any background

10

Hey,

See the image, I hope this helps:

Screen Shot 2021-12-16 at 16.44.56.png
Screen Shot 2021-12-16 at 16.44.56.png2560×1600 800 KB

11

@Darcy1991 - this is image, where did you set it? in css or from customizer?

12

This picture is showing you I have tried to upload an image in the assets folder.

I also can’t find the code to add an image and I believe it should be ccs.

13

@Darcy1991 - do you want it for entire page? if yes then please add this css to the very end of your theme.css file and change image url to the one you need, should look like screenshot below

.password-page {
    background-image: url(https://cdn.shopify.com/s/files/1/0595/9378/5529/files/johny-goerend-pnigODapPek-unsplash_540x.jpg?v=1637314042);
}

suyash1_0-1639675229686.png
suyash1_0-1639675229686.png1920×1080 319 KB

14

Perfect that works.

How do I add the image I want?

15

@Darcy1991 - please try this css and change image name to yours , check if it works,

else you can use previous css and open your image like you did to take screenshot, right click on it, open in new tab and copy address in URL bar

.password-page {
    background-image: url({{ 'logo.png' | asset_img_url: '300x' }});
}
16

Hey, thank you I’ve got it working.

Do you know what the pixel size is for the password page?

17

pixel size changes on each screen, hence difficult to tell the exact height