Shopify themes, liquid, logos, and UX
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!
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!
Solved! Go to the solution
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;
}
}
Hey @kagebritt11,
Can I have the link to your store please? Thanks
Thanks @kagebritt11,
Could you also add the image so I can test it
Add the image in the reply like so?
Haha sorry, I mean add it to the password page. Doesn't matter if it's not looking good, I'll do that part
You're all good! I just did that!
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.
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.
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?
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;
}
}
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?
yeah, just at the bottom of the base.css file, just put it together.
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!
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;
}
}
This is whaat happened when I changed it to 'body.gradient.password'
Hey, PrimeWeb sorry to bug, I was just wondering if you had any idea how to fix that last issue? Thanks!
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;
}
}
You're a lifesaver! This worked perfectly, thank you!
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
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
Hey, how do you do this using another photo?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025