Custom password page background image for Debut Theme

[cxssxndrx]

Can someone please tell me or teach me how to put a custom background image on the password page, specifically for the Debut Theme? I’ve been trying for 2 days and following all the recent posts and advice I’ve found on here but have not had any success 

[KetanKumar]

@cxssxndrx 

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

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

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

[cxssxndrx]

aleksiethelabel.com

[LitCommerce]

Hi @cxssxndrx,

Please follow these steps:
- Step 1: Go to Assets and upload background image. https://i.imgur.com/TL2L0UL.png
Ex: name image: background.png
- Step 2: Go to layout/password.liquid file and add code here: https://i.imgur.com/8vTgWox.png , https://i.imgur.com/nAT9rqD.png
Code:

<style>
.template-password{
  background-image: url({{ 'background.png' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

Hope it helps!

[cxssxndrx]

It didn’t work unfortunately/:

[Savior]

@cxssxndrx 

1. Go to your store click on Actions > Edit Code

2. Assets > theme.css add below lines at the bottom of the file.

.template-password .modal {
    background-image: url(https://i.stack.imgur.com/wN3s7.png);
    background-position: center;
    background-repeat: no-repeat;
    height: 1000px;
}

---

If helpful then please Like and Accept Solution.

[LitCommerce]

Hi @cxssxndrx,

I checked and didn't find the code you added, you can add it at layout/password.liquid file?

Please add the code again, I will help you check it.

[hawkscode · Accepted solution]

@cxssxndrx  

open file theme.css

fine line number : 2653

.password-page {
  display: table;
  height: 100%;
  width: 100%;
  color: var(--color-body-text);
  background-color: var(--color-body);
  background-size: cover; 
  }
  

Replace by 

.password-page {
  display: table;
  height: 100%;
  width: 100%;
  background-image: url('https://img.freepik.com/free-vector/stylish-hexagonal-line-pattern-background_1017-19742.jpg?size=626&ext=jpg');
  background-size: cover; 
 }

thanks 

[cxssxndrx]

I applied it to the duplicate of my theme and it didn’t do anything. I’ll try again 

[KetanKumar]

@cxssxndrx 

sorry that facing issue again

i can't any code update at your theme how can i check or give image url so i will update

[cxssxndrx]

Thank you so much!!! It worked ❤️

[LitCommerce]

Hi @cxssxndrx,

I checked and you added code with incorrect URL you just need to change it everything will work fine. https://i.imgur.com/bKMEqBw.png 

Code change:

background-image: url(//cdn.shopify.com/s/files/1/0553/0465/0916/t/32/assets/aleksiethelabel_theme_2.png?v=1637063822&1051)

Hope it is clear to you.

[cxssxndrx]

@LitCommerce Hi, I already figured out. @hawkscode’s solution helped me. But thank you so much for trying to help!