Change background image per page

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/

Related Posts: