CSS Gradient Background for Body of One Page

[stuartrowens]

Good morning. I’ve looked at all of the threads on this topic I can find with no luck. I’m trying to set a CSS gradient background for only one page, but I want it be for the entire page (but not the headers and footers). Additionally, I’d like to use multiple sections for the page, so I don’t want to set it for just one section. I’ve added the CSS to the page custom CSS section and nothing has changed. Can you help?

Page: christcommunity.com/easter

[prakash_s]

Hello, @stuartrowens,

Thanks for writing to us.

To add CSS gradient background for only one page you need to go to the Page—>Select the page and click EDIT—>Scroll down to Page Settings —>Add a Body CSS Class

Now you can add the custom CSS by selecting a unique custom CSS class. In the below code, I have added a unique Body CSS Class as " custom-page-background"

.custom-page-background .x-main.full {
    background: rgb(131,58,180);
    background: -moz-linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#fcb045",GradientType=1);
}

Please feel free to change the CSS class but if you change the CSS class then you will have to change it in the CSS selector as well. Please change the gradient CSS as per your design or you can generate the gradient from here as well. https://cssgradient.io/

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[stuartrowens]

Perfect. Thank you for your help.

[prakash_s]

Hello @stuartrowens,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks