Adding a custom background to a password page?

Store Design
, , , , , ,
1

Hello, I am looking to add a custom image to the background of this page: theshadesofkco.com

Let me know the best way to do this!

Thanks

MM

2

Hi @mattpermute ,

You can use this code in CSS theme to add BG image :-

body

{
background-image: url(‘{{ ‘your-background.jpg’ | asset_url }}’);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}

Or else-

Some themes allow custom background images via:

  • Online Store → Themes → Customize → Theme Settings → Colors or Backgrounds
  • Check for a setting like “Background image” or “Body background” (upload it there if available).

Please let me know if it resolves the issue or else i can give more information.

Thanks !

3

@StevenT_A7 I’m looking to only add it to the password page for now and not necessarily the whole website, is there a way to add it just to that page?

4

Hi @mattpermute ,

In the appropriate file (password.liquid or main-password.liquid), add the below code at the top or inside a tag:

body { background-image: url('{{ 'password-bg.jpg' | asset_url }}'); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }

Note: Make sure the filename matches the image you uploaded.

You can darken the image or add a color overlay with this code:

body::before

{
content: “”;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
z-index: -1;
}

Please let me know if it works or else let me the theme name and i can provide more information.

Thanks!

5

@StevenT_A7 thanks for the help, it seems to be working but now i need to adjust the transparency of the block on top of.

Can you help me adjust this?

see attached document for reference

6

Hi @mattpermute ,

Use this Code :-

.password-page__wrapper

{
background-color: rgba(0, 0, 0, 0.5);
}

Note: Adjust the 0.5 to control transparency

Let me know if it works and please mark it as a solution and like all the replies , I will be very Greatful .

Thanks

7

@StevenT_A7 I’ve added that code, it looks exactly the same. any suggestions to achieve the transparency on the white blocks?