Adding a background to one single full page

Store Design
1

Hi,

I’m trying to add a background to my ‘8 Healthy Rituals for Sleep’ page in my shopify store (Dawn theme).
I just want one single image to cover everything.

I added the image in assets and added this code snippet to my base.css file:

#MainContent {
  background-image: url("5.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

However, this adds the image to all the other pages as well.
How do I specify it solely for that page?

Additionally, I would also like to place a background on my password page (covering the full page, in this case ALSO the header).
What would I add there?

I tried this code, but doesn’t seem to work:

.password-template {
    background-image: url(2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 55px;
    padding-bottom: 55px;
}

.password-header {
    background-color: transparent !important;
}

Store URL: 8hrsstore.com

Password: Test8hrs123!

Thank you so much!!

Mathias

1 Like
2

@Mathias8hrS

Please try this css class

.password {
    background-image: url(2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 55px;
    padding-bottom: 55px;
}

.password-header {
    background-color: transparent !important;
}
3

Hi @Mathias8hrS ,

  • 8 Healthy Rituals for Sleep: Go to Pages > 8 Healthy Rituals for Sleep > Content > Show HTML.

Refer https://i.imgur.com/miQPOMl.png

Add code at the beginning of the file: https://i.imgur.com/zkbXymE.png


- Password page: Please add code in 'section-password.css' file. Code:
.password-main{
        background-image: url(2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 55px;
    padding-bottom: 55px;
}
.password-header{
        background-color: transparent !important;
}

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

4

Hi both, thank you for the reply!

@LitCommerce add that to which file exaclty? It’s the same code I tried

@dmwwebartisan neither seem to work, would you happen to know how to code it into the base.css file, but so that it only applies to that specific 8 healthy rituals page?

Thanks again.

5

Hi @Mathias8hrS ,

Please follow these steps:

  • With 8 Healthy Rituals for Sleep: Go to Pages > 8 Healthy Rituals for Sleep > Content > Show HTML.

  • With Password page: Please add code in ‘section-password.css’ file.

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.