How can I set a background image for just the password page?

Store Design
1

Hello,

I’m currently using the DAWN theme.

I’ve set an image for my background on my Shopify page, but I would like in to only show up on my password page instead of all the pages, so that the content in my store is more visible.

2

To set a background image on just your password page, you will need to edit the CSS for your theme. The CSS code that controls the background image for your password page is typically located in the password.scss.liquid file.

You can access this file by going to the “Themes” section of your Shopify admin, clicking on the “Actions” button for your theme, and then selecting “Edit code”.

Once you have accessed the password.scss.liquid file, you can add the following code to set a background image for your password page:

#password {
  background-image: url('your-image-url.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Be sure to replace your-image-url.jpg with the URL of the image you want to use as the background for your password page. You can also adjust the background-position, background-repeat, and background-size properties to control how the background image is displayed.

3

thanks but this solution did not work.

note to mention i am currently using this code to have a custom background for the rest of my pages

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0684/3754/1185/files/yt5s_io-Biblically_Accurate_Angels__-_1080p__AdobeExpress_1.gif?v=1671084647) !important;
background-color: transparent !important;
background-position: top center !important;
background-size: cover;!important;
}

4

also i could not find that exact file within the dawn code editor

5

@chakraluca - can you share site link?

you can check base.css file

6

https://arkturus-2.myshopify.com

7

@chakraluca - the css you wrote is perfect, only thing is you used .gradient which is shared on all pages, change it to .password, so it becomes

.password {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0684/3754/1185/files/yt5s_io-Biblically_Accurate_Angels__-_1080p__AdobeExpress_1.gif?v=1671084647)!important;
    background-color: transparent!important;
    background-position: top center!important;
    background-size: cover;
    !important: ;
}
8

okay i tried that but now there is a white border whereas before it covered the whole page:

after
after1347×881 158 KB

before
before1347×870 183 KB

9

@chakraluca - I see like this, is it wrong?

suyash1_0-1671090630471.png
suyash1_0-1671090630471.png1366×768 215 KB

10

oh yea i did it on a duplicate theme ill edit the main one

11

try now

12

@chakraluca - if we make it transparent then it will look like this

suyash1_1-1671091185748.png
suyash1_1-1671091185748.png1366×768 206 KB

13

I see it isn’t exactly what i want but this information has been super helpful. I will use the previous code you provided because it works very well for mobile.

if you could include the steps to make it transparent I would appreciate it for future references

14

actually you will need to be familiar with css, you had used .gradient
class which is common for many elements and all pages on this theme, hence
it was affecting everything

.password is for password page only, so changed this page only