Different Backgrounds for each Category

  • Resolved cbeaman

    (@cbeaman)


    13 years, 11 months ago

    Hi,

    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 https://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";}
else{
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;
}
Viewing 15 replies - 1 through 15 (of 18 total)
  • Thread Starter cbeaman

    (@cbeaman)

    Sorry, the solution is from https://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…

    If your theme was using body_class you could do away with all that conditional code.
    https://codex.www.ads-software.com/Function_Reference/body_class

    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.. https://validator.w3.org/

    Thread Starter cbeaman

    (@cbeaman)

    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');
}

body.category-robot{
    background-image: url('images/oldpaper2.jpg');
}

body.category-space{
    background-image: url('images/oldpaper3.jpg');
}

body.category-brain{
    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!

    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!!!

    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 */ }

    or

    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).

    Hi!
    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!!

    the beauty of cascading styles
    – example:

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

    depends on the css id or class of your content area

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

    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??

    thx!!

    /*
    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?*/

    can you tell my me why??

    what is the exact code you are using?

    link to your site to illustrate this?

    in the css

    body{
font:12px/1.5 Helvetica,Tahoma,Arial,sans-serif;color:#000000;text-align:center;}
body.category-lenovo #content {
background-color:#333a5e;
}
body.category-sony #content {
background-color:#999999;
}
body.category-apple #content {
background-image:url(images/content_bg1.jpg);
background-repeat:repeat;
}
body.category-dell #content {
background-color:red;
}

    and in the index.php

    </head>
<body <?php body_class();?>>
<section id="wrapper">
<header>

    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
    background-image:url(images/content_bg1.jpg);
    is generally working in other areas of style.css?

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

    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 !!

    well done ??

    just ignore my rambling in my prev reply.

    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!
    thx!

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Different Backgrounds for each Category’ is closed to new replies.