[resolved] Different Backgrounds for each Category (19 posts)

  1. cbeaman
    Posted 5 years ago #


    I am trying to have a different background image for each category and I am having some trouble. I read/attempted several of the forum discussions on this site with no luck. I did find one method that worked for me, but only in Firefox and not in IE or Safari.

    My site is http://www.robotspacebrain.com (I am using the Clean home theme)

    I found the solution from:

    so... from that, I put this in the header.php

    <body id="
    <?php if (is_category('robot')){
           echo "robot";}
    elseif (is_category('space')){
           echo "space";}
    elseif (is_category('brain')){
           echo "brain";}
    echo "default";
    }?>" >

    and I put this in the stylesheet.css

    body#default { background:url(images/braincloseup4.jpg) top center no-repeat #000000; }
    body#robot { background:url(images/oldpaper2.jpg) top center no-repeat #000000;}
    body#space { background:url(images/oldpaper3.jpg) top center no-repeat #000000; }
    body#brain { background:url(images/braincloseup4.jpg) top center no-repeat #000000; }
    body {
        background-attachment: fixed;
        background-color: #000000;
        background-image: url('images/braincloseup4.jpg');
        background-position: left top;
        background-repeat: repeat;
        color: #3A3A3A;
        font-family: palatino,georgia,sans-serif;
        font-size: 12px;
        letter-spacing: 0.1px;
  2. cbeaman
    Posted 5 years ago #

    Sorry, the solution is from http://fearlessflyer.com/2009/05/how-to-change-the-background-dynamically-in-your-wordpress-theme/

    and it's working great in firefox, but I'd like to find a solution that can work in IE and Safari as well.

    Many thanks for the help,
    I'm learning slowly...

  3. Mark / t31os

    Posted 5 years ago #

    If your theme was using body_class you could do away with all that conditional code.

    You'd only need to create the appropriate CSS.. :)

    NOTE: There's nothing in your code that is specific to firefox, if it's not working in certain browsers, it would be my guess you have invalid HTML in the page. Run your problem page or pages through a HTML validator such as.. http://validator.w3.org/

  4. cbeaman
    Posted 5 years ago #

    Thanks a bunch.

    the body_class worked perfectly!

    for anyone who wants to change backgrounds for different categories:

    put something like this in the style.css

    body.home {
    background-image: url('images/braincloseup4.jpg');
        background-image: url('images/oldpaper2.jpg');
        background-image: url('images/oldpaper3.jpg');
        background-image: url('images/braincloseup4.jpg');

    this allowed me to have a background image for home, and then for the 3 different categories: robot, space, and brain with whatever images you want.

    and you'll need this in the header.php

    <body <?php body_class(); ?>>

    in the place of <body>

    thanks again!

  5. lemrac
    Posted 5 years ago #

    I think having different backgrounds for each topic and post would make things more clear and easy to dicipher. When you figure it out, fill us in!!!

  6. Mark / t31os

    Posted 5 years ago #

    You already can style based on individual page/post or any number of other factors, the body class produces a differing set of classes depending on what kind of page you're viewing.

    All you need do is examine the classes output onto the body tag across differing pages, and add appropriate CSS to target the cases you need.

    This is an example of applying CSS to the body when it has two or three classes(because i've seen this done wrong quite a few times).

    Two classes
    - applies to page when the body has the blog and home class

    body.blog.home { /* styling definitions here */ }

    Three classes
    - applies to page when the body has the archive,category and category-mycatname class

    body.archive.category.category-mycatname { /* styling definitions here */ }

    The important factor there is that elements that have multiple classes must be selected in CSS by joining the classes together with a period, and NOT LIKE THIS...

    body.blog .home { /* wrong */ }


    body .blog .home { /* wrong */ }

    Check what classes the body has applied when viewing your various pages and you'll find a unique set is given to each archive, page, post, and so on.. (you only need write appropriate CSS).

  7. never_stop
    Posted 4 years ago #

    I'm looking for the same code,exapt that i want to change a background color not in the body,but in the content part.

    So on each category a basic website background stays the same,but a content background changes like if the category is "space" it changes to a specific space background in the content part!

    I hope you can help me fix this.
    Thanks a lot!!

  8. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    the beauty of cascading styles
    - example:

    body.category-robot #content{
        background-color: #123ace;

    depends on the css id or class of your content area

  9. never_stop
    Posted 4 years ago #

    Thankyou very much for the help!!
    It works well!

  10. never_stop
    Posted 4 years ago #

    sorry,but i have a nother problem about that.:/
    this method is ok and working well if the background is a simple color code.But if i change that to background-image i wont display anything,but a white background.

    can you tell my me why??


    my tip is that the body tag has already have a background color as default,and if i write a background picture to a specific category,the main content-background overwrite it,to the main bg-color...is that possible?*/

  11. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    can you tell my me why??

    what is the exact code you are using?

    link to your site to illustrate this?

  12. never_stop
    Posted 4 years ago #

    in the css

    font:12px/1.5 Helvetica,Tahoma,Arial,sans-serif;color:#000000;text-align:center;}
    body.category-lenovo #content {
    body.category-sony #content {
    body.category-apple #content {
    body.category-dell #content {

    and in the index.php

    <body <?php body_class();?>>
    <section id="wrapper">
  13. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    as i can't see anything still without a link to your site, i have to check back:

    so, you are trying to put a background image content_bg1.jpg into the #content div if on a category archive 'apple' ?

    and that does not work.

    a background color in that same style would work?

    and the background image is definitively in the /images folder of your theme?

    and a style like this
    is generally working in other areas of style.css?

    unlessd you can supply a link to ilustrate your problem, this is reaching the end of what i can do.

  14. never_stop
    Posted 4 years ago #

    Okay im sorry,i dont know what was the miss typing,but when i looked at my site on the localhost server everything worked as they should!!
    maybe by browsers cache stored,the old version.. so,the code i posted before this is working as well!

    thanks for the help !!

  15. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    well done ;-)

    just ignore my rambling in my prev reply.

  16. never_stop
    Posted 4 years ago #

    Hey guys!

    Now i've got the same problem as before with the content bg ,but now i want the header image to change when a nother category was clicked!

    So for example,to be sure you understand what im asking:
    i got 4 categories (car,airplane,motorcycle,train)
    when the train category was clicked in the menu,the default header image (wich is 240h and 900w) changes to a specific train header picture(and so does the car,airplane...)

    I hope you can help me again!

  17. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    if the header image is done with a html img tag, then you might need to use conditional tags:


    for instance: is_category('car')

    if the header image is a background image, then apply the same method as before for your content.

  18. never_stop
    Posted 4 years ago #

    Well im looking for the same version of the problem solving,as it was before...so the body.category-something{} but i dont know how to use it,when i want to change the header picture...

    i tried body.category-something #header{} but it wont work..

    can somebody help?

  19. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    can you post a link to your site? (if you already have, i can't find it)

    you could also look into the existing styles, to find the exact css id or class of your header.

Topic Closed

This topic has been closed to new replies.

About this Topic