Change background image per page

Question

I would like to have a different background image as per PAGE (category)

When the user goes to the home.php, call it A, it shall have a background image, then if I send them to a page B, I would like the background image to change.

Can anyone steer me in the right direction for this, please? I understand it can be achieved via .css.

Answer 1

Yes, this can be done with CSS.

I have done this with page and post IDs.

IMPORTANT: The following are base examples and will need to be tested and tuned for your use. If you note any error here (with the base CSS examples), please post a note about the error.

To ID pages and posts, go to your Pages or Posts page and hover over the name of any page or post. While hovering look at the bottom left of your browser and the page ID will be displayed in the status bar. Or do what I do and use the Catch IDs plugin.

For one site-wide background use:

body
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To target a page:

body.page-id-33
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To target multiple pages:

body.page-id-33,
body.page-id-41,
body.page-id-725
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To target a category:

.category-CategoryName
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To target multiple categories:

.category-CategoryName,
.category-CategoryName-2
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To target Archive pages:

.archive
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To target a custom template for a page, post or category use:

.page-template-name
{
    background-image:url('example.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

In each of the above instances you can simply copy the CSS and paste it again, changing the IDs and image URL to change the bg image for different pages or categories.

REFERENCES

Sorry--while I'm trying to help and give attribution to several source articles, the overzealous rules here prevent me from posting more than one link to the references. So I wrote a post about this and all the references are on that post.

http://kb4wp.com/blog/use-css-to-target-pages-posts-and-categories/

Answer 2

If it doesn't work with a post, try this

body.postid-number { your image }