Please, I am trying to change the background image for my 2.0 theme. Can someone help?
Do you want to change the password page background?
Yes
Can you share the Store URL?
Here’s the code:
{
“layout”: “password”,
“sections”: {
“main”: {
“type”: “newsletter”,
“blocks”: {
“heading”: {
“type”: “heading”,
“settings”: {
“heading”: “Coming Soon”
}
},
“paragraph”: {
“type”: “paragraph”,
“settings”: {
“text”: “
We are currently working to bring you a new shopping experience!<br/><br/>Sign up to be notified when we launch.</p>”
}
},
“email_form”: {
“type”: “email_form”,
“settings”: {
}
}
},
“block_order”: [
“heading”,
“paragraph”,
“email_form”
],
“settings”: {
“color_scheme”: “background-1”,
“full_width”: false
}
},
“166102725971a1cfbb”: {
“type”: “contact-form”,
“disabled”: true,
“settings”: {
“heading”: “Contact form”
}
}
},
“order”: [
“main”,
“166102725971a1cfbb”
]
}
you want a full page background?
Yes I do
Plz upload the picture to your assets folder and share the Link to that picture.
I also created a assets theme named
password-background-page.png
You can try this code
- Go to Online Store-> Theme->Edit code
- Asset-> base.css ->paste the below code at the bottom of the file.
.password .color-background-2.gradient,.password-main>section:only-child .newsletter__wrapper,.password__footer.color-background-1.gradient{
background: transparent;
}
body.password.gradient {
background: url(https://community.shopify.com/c/image/serverpage/image-id/238444iD41A2FECC9FF8A65/image-size/large?v=v2&px=999);
background-size: 100% 100%;
background-repeat: no-repeat;
}
it worked! But is there a way to change the font color for only this page? It seem s that my theme only allows me to change the font for the entire webiste.
Disregard. Is there a way to make the image not so zoomed in?
use this code for color
.modal__toggle-open.password-link.link.underlined-link ,#shopify-section-template--15495102890203__main > div > div > h2{
color: #fff;
}
input#NewsletterForm--template--15495102890203__main{
color: #fff;
}
plz use a image with higher resolution.
Ahhh, I see. Okay, well thank you so much for your help! I think I will just go back to the original background until I figure out a better image. Thank you!
Will this code work universal for any image I upload? Or was it catered to the image?
every code is only for this page
Yes I understand. I am asking if I upload a different image to the assets folder, will this same code you provided work?