How Do I Use Custom CSS The Background Image of Just One WordPress Page?

For many WordPress websites, buying a proprietary theme can help speed up the process of designing and styling a new static website for a relatively small investment. But there is a lack of consistency in how themes handle background images, and while the individual content of pages can always easily be edited through the WordPress Dashboard, it is not always clear how to customize the layout of a page for a single page of your website.

Fortunately, WordPress always offers options for Custom CSS so that you always have an option for custom styling to your website regardless of the theme options available. In this example, we will assume your page has a stylesheet that uses code throughout your website that looks like this:

body {
  background-image: url('https://www.YourWebsite.com/wp-content/uploads/2017/01/background-image.png');
}

In this case, the styling code you would use would leverage a combination of the WordPress API and CSS selectors to specify the changes should only happen on your individual target page. First, you would find the ID of the page by editing the page through the Pages section of the WordPress Dashboard, and checking the URL for a number after the “post-id=” or “page-id=” field. Let’s say for this example the id number is 1000. Then simply open up the Custom CSS field in either your Theme Options or under the Appearance section of your dashboard, and enter your code which would look like this:

.page-id-1000 body {
  background-image: url('https://www.YourWebsite.com/wp-content/uploads/2017/01/new-background-image.png');
}

The WordPress API allows for individual pages to be styled using the .page-id-XXXX or .post-id-XXXX CSS class syntax, and by insering the CSS class before the element using the background image, the CSS selector.

You can also play around with CSS attributes like background-repeat and background-size to create the effect you want on a page.

For custom website builds and SEO services, contact Boston Web Marketing to see the value we can provide for your Boston small business.