How do I make my image full size on password page (North Theme)

[isaacdob]

I am wanting to make my image full size on my password page. Anytime I choose an image it only pulls up above the email subscribe. I am wanting my image behind the subscribe button. My website is https://evrenclothing.com/password. 

[Dan-From-Ryviu · Accepted solution]

Please try to open password.liquid file and add code before </head> tag instead of and check again. 

[Dan-From-Ryviu]

Hi @isaacdob 

Please send your image link

[isaacdob]

@Dan-From-Ryviu The image that I am trying to use for the password page?

[Dan-From-Ryviu]

Correct

[isaacdob]

@Dan-From-Ryviu 

 

[isaacdob]

@Dan-From-Ryviu Is this possible?

[Dan-From-Ryviu]

Hi @isaacdob 

Let me check

[Dan-From-Ryviu]

Please go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

 

[isaacdob]

Thank you so much. Do you know why the photo appearing twice?

[Dan-From-Ryviu]

Please update code to make it not repeat 

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
background-size: cover;
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

[isaacdob]

@Dan-From-Ryviu I put this code in and it still appears black on the page. Any reason why?

[Dan-From-Ryviu]

Let me check

[isaacdob]

@Dan-From-Ryviu thank you

[Dan-From-Ryviu]

I cant found the code you added. 

[isaacdob]

@Dan-From-Ryviu 

 

[Dan-From-Ryviu · Accepted solution]

Please try to open password.liquid file and add code before </head> tag instead of and check again. 

[isaacdob]

@Dan-From-Ryviu This worked! Image is cut in half on desktop though. Works perfect for mobile

[isaacdob]

@Dan-From-Ryviu i got it. but image is cut in half

[Dan-From-Ryviu · Accepted solution]

If you want background display as original version then please update code to this 

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

[isaacdob]

I see. I like the sizing of the other code you sent. but it cuts off right side of image. 

 

[Dan-From-Ryviu]

You are most welcome