How to change background for each page in WordPress?

5 Views

I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?

And,i don’t want to change the background element. I want to change the background image of the #main element in my css..

Read More

I already have a css file so will overwriting the same elements using php affect anything?

Any help will be appreciated…Thanks

Post Views: 5

Related posts

Leave a Reply

4 comments

  1. Each page or post will have a different class on the body, ie.
    page-id-1234
    post-id-4567

    You can use this to your leverage inside your CSS file:

    body {
    background: url('home.jpg');
}
body.page-id-1234 {
    background: url('page-1234.jpg');
}
body.post-id-4567 {
    background: url('page-4567.jpg');
}

  2. You could give each div#main (I assume it’s a div) another class. So

    <div id="main" class="pageOneBackground">...

    <div id="main" class="pageTwoBackground">...

    etc…

    Then remove the background-img from the div#main and apply individual background-imgs to each new class.

    This won’t affect the php.

  4. If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:

    body {
    background-repeat:none;
    background-position: center top;
etc...

    Then on each page just add:

    <style type="text/css">
body {
    background-image:url(/images/background1.png);
}
</style>

    You can also see this on the source of this page.