Hi,
I’m looking to add a custom background to one of the pages of my shopify store, however I want this one picture to cover both the header AND the the rest of the page (so no overlap, just one picture). Does anybody know how I do that? Attached you’ll see what I did now: I just added the same background picture to both header and page, but does not look smooth due to the separation (see yellow circle). I’ve also added the custom CSS code I have put in my theme.scss.liquid file.
Thank you in advance.
Kind regards,
Mathias
@dmwwebartisan
8hrsstore.com
Just looking to apply that background to the full coming soon password page.
Thank you.
@Mathias8hrS
Try this css code
please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid
.password-template {
background-image: url(3.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 55px;
padding-bottom: 55px;
}
->paste below code at the bottom of the file.
1 Like
@Mathias8hrS
also add this css class
.password-header {
background-color: transparent !important;
}
1 Like
@Mathias8hrS
If helpful then please Like and Accept Solution
1 Like
@dmwwebartisan
Unfortunately doesn’t seem to work, still has the header as a separate image (photo 1). If I take out that image, it’s just a white rectangle (photo 2) and even if I put opacity of the header background to 0.0 it’s not 1 smooth image (photo 3). Any ideas how to get that header background gone and just the template background remaining? Would be a big help, thx!
@dmwwebartisan
Forgot to delete the background I had layered on the section of the page, now it actually worked! Thanks a lot!
