Solved

How Do I Make Background Image On Password Page Fill The Screen Dawn Theme?

kagebritt11
New Member
21 0 0

Hi, I've been trying to make this image below full length and width on my password page and i've tried a few different options and it messes up each time. I'm using the theme dawn by the way!

Desert Theme.jpeg

 

When I try the sizing is incorrect like this, alongside it being on every single page when I only need it on the password page. If anyone could please help that would be great! Thank you!

Screen Shot 2024-03-17 at 5.57.26 PM.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

Hey! Don't know why, I didn't receive a notification for the previous reply you sent. Here's the updated code

body.gradient.password, 
body.gradient.password .gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
}

@media only screen and (max-width: 989px) {
    body.gradient.password,
    body.gradient.password .gradient {
        background: var(--gradient-background);
        background-attachment: fixed;
        background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
        background-color: transparent !important;
        background-position: top left !important;
        background-size: 100% 100% !important;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 19 (19)

ThePrimeWeb
Shopify Partner
2138 614 491

Hey @kagebritt11,

 

Can I have the link to your store please? Thanks

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

Of course, here you go! https://ashbk.shop/

 

ThePrimeWeb
Shopify Partner
2138 614 491

Thanks @kagebritt11

 

Could you also add the image so I can test it

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

Add the image in the reply like so? 

Desert Theme.jpeg

ThePrimeWeb
Shopify Partner
2138 614 491

Haha sorry, I mean add it to the password page. Doesn't matter if it's not looking good, I'll do that part

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

You're all good! I just did that!

 

ThePrimeWeb
Shopify Partner
2138 614 491

Saw it, wonderful. Did you add it by code or was there a setting in the theme editor to add it?

 

If you did add it by code, could you please amend the background-size from auto to '100% 100%', screenshot below.

 

ThePrimeWeb_0-1710729060454.png

 

 

If you didn't add it by code, please paste the following at the very bottom of the 'base.css' file in the edit code option of your theme.

 

 

body.gradient.password {
   background-size: 100% 100% !important;
}

 

 

Also please note that this image will not look good on desktop because it's a portrait image.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

I had added it by code, I'll try that right now, thank you! And also do you have a suggestion to make the image fit well in both desktop and mobile?

 

ThePrimeWeb
Shopify Partner
2138 614 491

It'll fit well on mobile because it's a portrait image, but the same image will not fit well on desktop because you need a landscape image for desktop. There's no way to make a portrait image look good on a landscape device. It'll just stretch unnaturally.

 

The best way to do it is to have 2 images, one for desktop and one for mobile.

 

The code below is for a desktop and mobile version, top code is for the desktop, the code below is for mobile, you can change the url for both the images and add a desktop version (landscape) and a mobile version (portrait)

.gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
}

@media only screen and (max-width: 989px) {
    .gradient {
        background: var(--gradient-background);
        background-attachment: fixed;
        background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
        background-color: transparent !important;
        background-position: top left !important;
        background-size: 100% 100% !important;
    }
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

Oh wow! Thank you so much, i'll try it out right now and let you know the outcome! Do I just put both codes directly under each other in the same section?

 

ThePrimeWeb
Shopify Partner
2138 614 491

yeah, just at the bottom of the base.css file, just put it together.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

Okay I just tried the "100% 100%" option and it fit the screen perfectly thank you! The only issue is that it's on every page such as the home page, the products page, and etc. Would you know how to just keep it only for the password page? Thank you!

 

ThePrimeWeb
Shopify Partner
2138 614 491

Yeah just change the '.gradient' class to 'body.gradient.password' in the css code

 

body.gradient.password {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
}

@media only screen and (max-width: 989px) {
    body.gradient.password {
        background: var(--gradient-background);
        background-attachment: fixed;
        background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
        background-color: transparent !important;
        background-position: top left !important;
        background-size: 100% 100% !important;
    }
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

This is whaat happened when I changed it to 'body.gradient.password' 

Screen Shot 2024-03-17 at 8.07.09 PM.png

kagebritt11
New Member
21 0 0

Hey, PrimeWeb sorry to bug, I was just wondering if you had any idea how to fix that last issue? Thanks!

 

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

Hey! Don't know why, I didn't receive a notification for the previous reply you sent. Here's the updated code

body.gradient.password, 
body.gradient.password .gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
}

@media only screen and (max-width: 989px) {
    body.gradient.password,
    body.gradient.password .gradient {
        background: var(--gradient-background);
        background-attachment: fixed;
        background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
        background-color: transparent !important;
        background-position: top left !important;
        background-size: 100% 100% !important;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
kagebritt11
New Member
21 0 0

You're a lifesaver! This worked perfectly, thank you!

BSPOKE_STUDIO
Shopify Partner
7 0 0

Hey, this didn't work for me. I tried different images on desktop and mobile. Why is it looking like this? firstoffirst.com.au/password

priscychavez
Shopify Partner
10 0 0

Hello, I used your code but the image is repeating on the email sign up banner, how do I remove that image?

This is my password page https://deliriohats.com/password