Desired Result:
Display a background image on one page only on your WordPress website
Get your act together:
- Backup your files and database
- Select an image or graphic that is suitable* to use as a background image
- Have a working knowledge about how to control CSS for your WordPress site
- Know where to find the area to manage the CSS for your site. It might be in one of the following areas:
- A child theme style.css file
- A CSS editor plugin or a Jetpack plugin’s CSS module
- Additional CSS area built into the WordPress customizer
Make it happen:
- Find the page-id. Use view page source for your preferred browser.
The page-id might be located in an area that looks something like this:
body class=”page-template page-template-template-full-width page-template-template-full-width-php page page-id-xxxxx …… - Customize a starter code snippet and add it to the area to manage the CSS for your site.
- Try this code snippet for Twenty Sixteen and Twenty Seventeen themes
.page-id-xxxx .site-content{/*replace xxxx with real ID of the page*/
background-color: /*replace with any hex or rgb color code*/;
background-image: url("/*replace with the link to your selected*/");
background-repeat: no-repeat;
background-position: left top;
} - Try this code snippet for Symphony Pro theme
.page-id-xxxx.fluid-width .content-container {/*replace xxxx with real ID of the page*/
background-color: /*replace with any hex or rgb color code*/;
background-image: url("/*replace with the link to your selected*/");
background-repeat: no-repeat;
background-position: left top;
} - Try this code snippet for Baton Pro theme
.page-id-xxxx .content-wrapper-in { /*replace xxxx with real ID of the page*/
background-color: /*replace with any hex or rgb color code*/;
background-image: url("/*replace with the link to your selected*/");
background-repeat: no-repeat;
background-position: left top;
}
*Suitable is a subjective term. Not all images will work well when used as a background of a page. Some images may interfere with the important content on a page. Other images may look odd in smaller devices. Some images might need to repeat to fill the available space.
Resources
colorhexa.com
jetpack.com/support/custom-css
wordpress.org/plugins (search for CSS editor)