Why the heck was it so hard to figure this out? You’d think this would be a core feature, but whatever. Here’s how I do it
In the page editor, there is no place to add custom CSS for pages. You can do it for blocks which let’s you add a CSS class which is defined by you in your ‘Additional CSS’ page at Appearance->Customize page.
We will use the Additional CSS menu to accomplish this, but since we can’t add the class in the page editor, we’ll need to get the page ID.
- Find the ID of the page you want to add a background to
- You can find this in the URL for the page. It’s the number after ‘?post={ID}’
- Find the URL of the image you want to be your background.
- Assuming you’ve already uploaded it to your site, you can find this by clicking on it in the Media Library. The URL you want is after “File URL:”
- Go to your WordPress main menu
- Go to Appearance->Customize->Additional CSS
- Add The following code. In this example, the page ID is 1234 and the image URL is https://www.website.com/wp-content/uploads/background-image.png
body.page-id-1234 {
background-image: url("https://www.website.com/wp-content/uploads/background-image.png");
}And that’s it! This tells WordPress to instead render this background-image on the page with id 1234. You can of course add more CSS here to control other aspects of the background-image and this specific page.
Other Developer Corner posts will be more interesting than this. I just made this because I was mad that this information was so hard to find.