Password Page Background

Technical Q&A
1

Hi

I am trying to get this image to fill the entire page, looked at like 3 other community forum pages and still can’t seem to get it working.

image
image1918×950 155 KB

Anyone have any suggestions please? :slight_smile:

Website is boulevards.uk if anyone needs this

Many thanks in adfvance

BV

2

Just to add, I’m fine with it looking like that on Desktop, its just on a mobile it looks terrible with the massive gaps so that’s the reason for trying to get this sorted.

3

Hey @Boulevards!

in order to remove the gap from the mobile on password page, then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> section-password.css

In the end of section-password.css paste the following code that shared below.

small.password__footer-login.password__footer-text {
    display: none !important;
}
small.password__footer-caption.password__footer-text {
    display: none !important;
}
.password__footer.color-background-1.gradient {
    padding-top: 1rem !important;
}
.email-signup-banner.banner.banner--content-align-center {
    height: 100%;
}

Results:

image
image366×690 62.1 KB

4

Always backup themes before modifying code.

Try custom css settings first before full file edits
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Other posters probably got it unless you mean full-page background,

A background of a SECTION, is not the same has having a background for the ENTIRE page.
If a theme doesn’t have a setting for such a feature then it’s an advanced theme customization because there can be a bunch of different small changes required.

Here’s a small adaptation moving the image to a body background to use with the other code in a custom css setting at the GLOBAL level.

  #shopify-section-main-password-header, #shopify-section-main-password-footer {
    opacity: 0.82;
  }
  body {
    background: url(https://boulevards.uk/cdn/shop/files/pexels-marek-piwnicki-3907296-12638470-modified.jpg?v=1761586630&width=875);
    background-repeat: no-repeat;
    background-size: cover;
  }

:clipboard: adjust the width parameter to tune the FILE size to be as small as possible but still good enough quality.

screenshot of boulevards.uk password with fullpage image treatment and semi transparent header and footers
screenshot of boulevards.uk password with fullpage image treatment and semi transparent header and footers499×641 55.4 KB

Reach out if you need it more advanced such as more granular opacity or a treatment where the mountain peak is part of the header etc.
Otherwise search first to DIY:
https://community.shopify.com/search?q=dawn+background+image+full+page
https://community.shopify.com/search?q=dawn+background+image+full+page+password