Limit Background Image to Front Page?

Shapely
1

I am trying to limit my background image to the front page. I found the following in another post. It worked for another Shapely user, but not for me.

body.custom-background {
background-image: none;

home .body.custom-background {
background-image: url(https://sailtupelohoney.com/wp-content/uploads/2023/09/Sailing-1-1-e1694885333921.jpg);
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

}

This does not work on the home page. The first line of the 2nd command group shows in red type indicating it is bad code. If I use only the first or “body” paragraph, a background image inserted with the theme’s option buttons does not show. I can’t tell if it turns off the image for subsequent pages unless there is an image on the home page for comparison.

I am trying to have a background image for the home page and just plain background of a color of my choice for the following pages or perhaps a parallax block with a unique image for each page… The second page will be static with a description and images of our boat. I will attempt to embed the charter rates from another site on the third page. The fourth page will be a blog with narrative, pics and video and the final page will be a contact page. Maybe some of these pages can be combined. Not there, yet.
Bob

2

Hi Bob

Please provide a link to the page and let me know where exactly you want to have bg image.
Also, please provide link to the image.

Regards.

3

sailtupelohoney.com

Link to image is in original post.

I want bg image on front/home page but not on any other pages.

4

Hi Bob

you just need to change css selector:

body .home.custom-background {
    background-image: url(https://sailtupelohoney.com/wp-content/uploads/2023/09/Sailing-1.jpg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Regards

1 Like