Seperate background color/image for each page

Hello there!

First of all, a quick suggestion: don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

If you can provide a link to the site you’re working on, we can have a look and try to diagnose what the problem might be.

With the vast majority themes, this code should do the trick:

.page-id-xx {
  background-color: pink;
}

If this doesn’t work, it’s possible there’s something else in your site’s CSS that’s causing a conflict. If you can share a link to your site, it should be easy to see what’s causing the trouble. ??

thanks Sarah, I will try the plugin you suggested. I did add this code to the bottom of the file in the special code area but nothing happened. I will try it with the plugin and see if that works.
I didn’t want to publicly post this site. If you send me an email to [email moderated – the forum does not provide support via email]
I can send you a link.

Thanks for your help
Les

sarah, installed jetpack but can’t find the option for custom CSS.
This is asking me to loginto wordpress.com but my site is not a WP.Com site.
?

Jetpack uses WordPress.com to provide some of its functionality, so you just need to hook it up to a WordPress.com site to get it working. ??

The Custom CSS module can be activated by navigating to Jetpack > Settings and clicking the “activate” button next to Custom CSS.

LOL, I want to investigate JetPack before I go full out. I did load Custom CSS & JSS plugin so I could add the code. I was going to add “Custom CSS” but after I updated WP for jet Pack Custom was no longer compatible.
Bottom line. I added the code you gave me and when I did a f5 refresh on the page a pink bar flashed under the WP bar but was then over written by the original background color and image.
The site is nwihabitat.org and the “About Us” page is the one that’s set to have the pink background.

Thanks for your help.

I just tried removing the “background: #50B847 url(‘images/page.png’) fixed ;” from the style sheet so there was no background defined.
The new yellow background for that page showed up perfectly. I am going to try adding an image next.
It would seem if I do this, there is no default background and I need to add a background for every page.

Thanks again for the assistance.

Hi there,

I took a look at your site and I think I see the conflict you were having. Basically, the background image was set on a different container element, so it was covering up your new background colour.

If you use this CSS instead:

.page-id-49 #art-main {
    background: yellow;
}

the background colour will be changed for the page you specify, and you can leave the existing background image for all other pages. ??

Cheers!

Thank you so much Sarah. I ended up doing it the hard way by specifing every page but when I have a free minute I will correct it per your instructions. The plug-ins usually make this type of thing so easy but I have seen some conflict when using Artisteer. I like Artisteer but setting to much in the Theme makes it difficult to change later on.
Thanks again.

To end this and make it easier for everyone else.
I had loaded “Full background Image Manager” Plugin and it just wouldn’t work. After I removed the “Background” line with color and image from the Style Sheet, the plugin worked. It even over rides the code we put in.

Today has been a leaning experience.

H Sarah, Are you able to please help do the same for my website?

I am just wanting to separate the background color of the comments, and individual posts,so it is distinguished from the normal background.

Hi @bradturvey01,

In order to get a response specific to your problem, please start a new thread for your issue—this one has already been resolved, and you’ll have more help if you start a new topic. ??

Cheers!