Adding a background image to the password page on the Boundless Theme

Technical Q&A
1

I’ve been looking for this in all the forums but got no luck.

For the boundless theme, there is no background image in the password page straight from the fresh template so I’m assuming that I have to create it but I’m a newbie at this so I really need the help to get this done.

Basically, I’m trying to have a background image only on my password page, just like that. As of now I have the password page blank, so I just need to add the background image.

Please, thank you.

2

Hi @LeonLogans1

Aibek is here from Speedimize.io

Hope everything is fine on your end.

You need to go here:

Online Store->Theme->Action->Edit Code
Then go to theme.scss and change a couple of properties in the style.

.template-password {
background-image: url(https://freehtmlthemes.ru/assets/images/articles/css-fon.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

Remove height: 100vh

Instead of the url, you can put the url of your picture. But this is not enough, since there are still styles that will grind the background-image. To avoid this, remove the background-color in all these classes:

It is better to work in a copy of the current theme, so that there are no downtime

.password-page, .password-header, .password-footer

This way you will add a picture to the background. It remains only to correct the colors of the texts. Since if you have a dark background, the text will not be visible. If the picture is light, then the color can not be changed.

3

thank you for helping me, i truly appreciate it but I copied the same exact code but didn’t work for me

here’s a copy of what i have under that section,

/============= Templates | Password page =============/

.template-password {
background-image: url(https://freehtmlthemes.ru/assets/images/articles/css-fon.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

.password-page {
display: table;
height: 100%;
width: 100%;
color: $color-body-text;
background-color: $color-body;
}

.password-page-section {
display: table-row;
width: 100%;
}

.password-header {
height: $height-site-header;
background: $color-navigation-bg;
display: table-cell;
vertical-align: middle;
}

.password-logo {
.logo {
display: none;
color: $color-navigation-text;
width: $width-logo;
max-width: 100%;
}
}

.password-content-section {
display: table-row;
width: 100%;
height: 100%;
margin: 0 auto;
}

.password-main {
display: table-cell;
vertical-align: middle;
padding: ($gutter-site / 2) $gutter-site;
}

.password-main__inner {

}

.password-hero {
margin-top: $gutter-site * 4;
}

.password-login-form, {
display: block;
}

.password-signup-form, {
display: block;
}

.password-message {
max-width: 500px;
margin: 0 auto;
}

.password-message {
font-size: em(16);
margin-top: $gutter-site * 1.5;
}

.password-login-form {
text-align: center;
padding: $gutter-site;
}

.password-signup-form__heading, {
display: block;
}

.password-social-sharing__heading {
margin-top: $gutter-site * 2;
margin-bottom: $gutter-site;
}

.password-social-sharing {
margin-top: $gutter-site;
}

.password-login, {
display: none;
font-size: em(16);
padding-bottom: 200px;
}

.admin-login {
margin-top: $gutter-site / 2;
}

.password-login {
@include header-font-stack();
margin-top: ($gutter-site * 0) 0;
}

.password-footer {
background-color: $color-footer;
display: none;
vertical-align: bottom;
padding: $gutter-site;
color: $color-footer-text;
}

.shopify-logo-svg {
width: 1.5 * $font-size-base * 120 / 35;
height: 1.5 * $font-size-base;
display: none;
line-height: 0;
vertical-align: top;

path {
fill: $color-footer-text;
}
}

4

Hey @LeonLogans1

Can you please share with us the URL of your shop?

So we can find a solution for you.

Kind Regards,

5

at the moment i cannot, sorry…

but can we work this out some other way like you showing me a website that has it?

sorry for making this difficult