Forums

WordPress › Support » Themes and Templates

different background image for each category (9 posts)

  1. Charbax
    Member
    Posted 6 years ago #

    Hi how do I make it display a different background image in each category?

    Currently my themes style.css has this to display one image as background:

    body {
    background: #000000 url(/myimage.jpg) repeat-x;
    color: #FFF;
    }

    So can I point the URL of the image to a php file and somehow do a:

    <?php if(in_category('1'))
    {
    echo('bg_category1.jpg');
    }
    else if(in_category('2'))
    {
    echo('bg_category2.jpg');
    }
    else if(in_category('3'))
    {
    echo('bg_category3.jpg');
    }
    else if(in_category('4'))
    {
    echo('bg_category3.jpg');
    }
    ?>

  2. thornomad
    Member
    Posted 6 years ago #

    You mean a different background image behind the post or for the entire site ? The code you cited, if put inside the loop, would certainly include the correct image for the correct category with the post; however, it isn't going to replace the one you have set as a style. What you will probably need to do is something like this (in style sheet first):

    #bck-cat-1 { background: #000000 url(/myimage1.jpg) repeat-x; }
    #bck-cat-2 { background: #000000 url(/myimage2.jpg) repeat-x;}
    etc

    Then in the template file (probably the header) run the same if statement, only use it to echo: <div id="#bck-cat-1"> ... this will change the div for each category and change teh corresponding background as well.

  3. Charbax
    Member
    Posted 6 years ago #

    I mean the background image for the entire site..

    Do I need to use div?

    Ok I will start now to do what you have described, but I am not sure I know what

    "in the template file (probably the header) run the same if statement, only use it to echo: <div id="#bck-cat-1"> ..."

    means.. thanks for your help.

    Do I need to add in the header.php of my theme this?

    <?php if(in_category('1'))
    {
    echo('<div id="#bck-cat-1">');
    }

  4. Charbax
    Member
    Posted 6 years ago #

    So I put this in my styles.css file:

    #bck-cat-1 { background: #000000 url(/myimage1.jpg) repeat-x; }
    #bck-cat-2 { background: #000000 url(/myimage2.jpg) repeat-x;}

    So what should I put in my header.php file?

    <?php if(in_category('1'))
    {
    echo('<div id="#bck-cat-1">');
    }
    ?>

    Does not seem to work. Do I put it in the <body> of the header.php? Is it because <="# signs are not allowed in php?

  5. Bryan Davis
    Member
    Posted 6 years ago #

    Take the # out of the code for the header.php. In CSS, # is used to reference an ID from (X)HTML.

    i.e. #bck-cat-1 = id="bck-cat-1"

    Do you have posts in Multiple categories? This may further confuse this method...

  6. Charbax
    Member
    Posted 6 years ago #

    BAsically I'd like a background image for when browsing the Archive of a specific category. If the user is on the blog frontpage then there would be a default background image. And that I would also like to be able to assign some specific pages or posts their own background image.

    So once I have put this in the style sheet:

    #bck-cat-1 { background: #000000 url(/bck-cat-1.jpg) repeat-x; }
    #bck-cat-2 { background: #000000 url(/bck-cat-2.jpg) repeat-x;}
    #bck-post-17 { background: #000000 url(/bck-post-17.jpg) repeat-x;}
    #bck-standard { background: #000000 url(/bck-standard.jpg) repeat-x;}

    do I just put following in <body> of the header.php file?:

    <?php if(in_category('1'))
    {
    echo('<div id="bck-cat-1">');
    }
    else if(in_category('2'))
    {
    echo('<div id="bck-cat-2">');
    }
    else if(is_single('17'))
    {
    echo('<div id="bck-post-17">');
    }
    ?>

    Maybe I should find info on Google about how to use div tags. I am not going after getting just a background image for the post, but I'd like to set the different background images for the whole blog depending on which category or specific post or page that you are browsing.

    Thanks in advance for you help!

  7. moshu
    Member
    Posted 6 years ago #

    Try to get some ideas from here:
    http://wordpress.org/support/topic/30653?replies=16

  8. Charbax
    Member
    Posted 6 years ago #

    Wow thanks moshu.

    I went to http://codex.wordpress.org/Category_Templates

    And it looks like I just need to create some category-1.php category-2.php etc for each of the categories to display differently, each of them fetching a different CSS file?

    I am trying but am not figuring it out.

    Here are my theme files (tweaking of almost-spring theme for a while now): http://charbax.eu/charbaxtheme-basedonalmostspring.rar

    If someone could help me with a few things, I am willing to pay that person 50$ or more using paypal..

    I need:

    - The background-image to be different for each category. (following this topic and http://codex.wordpress.org/Category_Templates I have not yet been able to make it work)

    - All text should be white text and have black background, just like subtitles, so the text is readable on top of the background images. (I thought I could simply tell the body tag in the CSS file to make all text with black background, but I can't figure out how to do it)

    - the right sidebar should stay on top even for small screen sizes. (right now it pops down to the bottom of the screen. for example if you resize the browser window manually)

    And if you might be able to help with a few more design details we could talk about it.

    Please email me at charbax@charbax.com if you can help! Thanks!

  9. Charbax
    Member
    Posted 6 years ago #

    OK I made the "different background image for each category" work using the code from moshu's thread here in a post by jberglund:

    <style type="text/css" media="screen">
    /* Calls the style sheets for each category */
    <?php
    $post = $wp_query->post;
    if ( in_category('3') ) {
    include(TEMPLATEPATH . '/category3.css');
    } elseif ( in_category('4') ) {
    include(TEMPLATEPATH . '/category4.css');
    } elseif ( in_category('5') ) {
    include(TEMPLATEPATH . '/category5.css');
    } elseif ( in_category('8') ) {
    include(TEMPLATEPATH . '/category8.css');
    } elseif ( in_category('13') ) {
    include(TEMPLATEPATH . '/category13.css');
    } elseif ( in_category('15') ) {
    include(TEMPLATEPATH . '/category15.css');
    } else {
    include(TEMPLATEPATH . '/style.css');
    }
    ?>
    </style>

    <?php /* Calls the header image for each category - necessary code */
    $post = $wp_query->post;
    if ( in_category('3') ) {
    $imgurl = "images/category3.jpg";
    } elseif ( in_category('4') ) {
    $imgurl = "images/category4.jpg";
    } elseif ( in_category('5') ) {
    $imgurl = "images/category5.jpg";
    } elseif ( in_category('8') ) {
    $imgurl = "images/category8.jpg";
    } elseif ( in_category('13') ) {
    $imgurl = "images/category13.jpg";
    } elseif ( in_category('15') ) {
    $imgurl = "images/category15.jpg";
    } else {
    $imgurl = "images/all.jpg";
    }
    ?>
    <style type="text/css" media="screen">
    /* Disable the header style in the individual style sheets and embed it here. */
    #header {
    background: url(<?php bloginfo('stylesheet_directory') ?>/<?php echo $imgurl; ?>);
    height: 120px;
    margin: 0 auto;
    width: 100%;
    padding:0;
    border: 1px solid #BEBEBE; }
    </style>

    But I still got a few design stuff I need help with so thanks for contacting me if you can do all kinds of wordpress theme tweaking.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags