Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
No. It is not CSS. You have to create 'add_meta_boxes' codex.wordpress.org/Function_Reference/add_meta_box –  ucon89 Jan 16 '14 at 16:54

2 Answers 2

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/

share|improve this answer

I was able to achieve this using a plugin named: Background Manager

share|improve this answer
    
not prefectly yet, but in the right direction –  A4D Jan 18 '14 at 17:38
2  
Please provide more information. How did the plugin help? Where can one get the plugin? –  Pat J Jan 18 '14 at 18:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.