Display a background image on one page only on your WordPress website

Desired Result:
Display a background image on one page only on your WordPress website

Get your act together:

  1. Backup your files and database
  2. Select an image or graphic that is suitable* to use as a background image
  3. Have a working knowledge about how to control CSS for your WordPress site
  4. 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:

  1. 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 ……
  2. 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)

Lisa Snyder

,