Change Background Image per page

  • kons

    (@kons)


    15 years ago

    Hi,
    im trying to put an background-image to my home (which is an page assigned to home) and another one to all the other pages and posts.
    Does anyone know a thread a site or a solution how this is solved?
    thnx
    kns

Viewing 15 replies - 1 through 15 (of 24 total)
  • shoshin

    (@shoshin)

    I’m having the same problem. I can’t seem to find any thread that resolves this issue in understandable do-this-and-do-that language.

    This is what I got from some site as code for a stylesheet sofar:

    body.home {
background-color: #cc0000;
}
body.page-id-2 {
background-color: #ee00ee;
}

    In stead of altering the background-color that is done here, you should be able to change the background-image for other pages likewise.

    However it’s not working in my stylesheet…
    Ideas anyone?
    (Not much of a code-writer by the way, or I wouldn’t be having this problem)

    esmi

    (@esmi)

    A link to your site might help. Help is free but psychic costs extra. ??

    PBP_Editor

    (@pbp_editor)

    Sure I set a background according to categories on my site, but you could also set per page id – is_page

    Here is the category conditional

    <?php if (have_posts()) : ?>

<?php $cat_obj = $wp_query->get_queried_object(); $cat_id = $cat_obj->cat_ID; ?>   

<?php if (in_category('1001') ):
	  // category 1001 ?>
	<style type="text/css">
	body {background-color:#000;background-image:url(/images/background.jpg);background-repeat:repeat;}
	</style>

<?php elseif (in_category('1002') ):
	  // category 1002 ?>
	<style type="text/css">
	body {background-color:#000;background-image:url(/images/background2.jpg);background-repeat:repeat;}
	</style>

<?php endif; // end the if, no images for other other categories ?>
    shoshin

    (@shoshin)

    Oh, I figured you would just read my mind ??
    I figured that you should be able to refer to the style-sheet to get a different background mark-up for any certain page, by creating a different class for that page in the stylesheet.
    Secondly, to assign that class to the body, as it is the background image of the body that needs to be different per page.
    So this is at the end of the header.php:

    <body class="page-id-<?php the_ID(); ?>">

    If I’m on page 2, that line should return “page-id-2” as the class for the body.
    Then in the style-sheet I have something like this:

    body{
         background-image: url(images/image_default.jpg);
         }

.page-id-2{
         background-image: url(images/image_for_page2.jpg);
         }

    … actually I don’t know if you can classify a body, hmm.

    PBP_Editor

    (@pbp_editor)

    Probably the best approach is set some conditional statements in the page.php file

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php if (is_page('page1') ):
	  // page 1 ?>
	<style type="text/css">
	body {background-color:#000;background-image:url(/images/background.jpg);background-repeat:repeat;}
	</style>

<?php elseif (is_page('page2') ):
	  // page 2?>
	<style type="text/css">
	body {background-color:#000;background-image:url(/images/background2.jpg);background-repeat:repeat;}
	</style>

<?php endif; // end the if, no images for other other categories ?>
    shoshin

    (@shoshin)

    It’s amazingly wonderful, yet logical. (i.e. Worked like a charm for background-color!) Would that work with posts as well? (As is_post has been depreciated and skipped since WP2.8.3)

    PBP_Editor, Thank you so much for helping out!
    Little problem: It’s working for the background-color, but not for the background image. Here’s the code, am I overlooking syntax errors?

    <?php if (is_page('4') ): ?>
	   <style type="text/css">
	   body {background-image:url(images/bg-page4.jpg);}
	   </style>

        <?php elseif (is_page('5') ): ?>
	   <style type="text/css">
	   body {background-color:#ffffff;}
	   </style>

    bg-page4.jpg exists, and is at the path that is stated (copied it directly from the CSS original). Yet I get no background-image at page 4.

    PBP_Editor

    (@pbp_editor)

    Make sure the image path is correct or just go ahead and use the complete path. And it should show up.

    shoshin

    (@shoshin)

    And… it’s working. Thanx PBP-Editor! Hope this solution is working for you too, Kons.

    Now I’m thinking of a way to get the background-image’s filename from a page’s custom field, so management of background images will become a feature of page-editing. I’ll come up with the code here when I’m done.

    PBP any way you could help me out with this? I’ve been working on it for a few hours now and nothing….

    best start is to post a link to your site and to post the code you are using to get the background image to show ??

    yeah that would make sense ??
    https://wonderlandbaby.co.cc

    okay i tried with the direct code from the theme details. i tried the ‘page 1’ way… i also tried the page ‘1’ way. this is the original set up i tried

    what are your page names?
    ‘page1’
    or
    ‘down-the-rabbit-hole-to-wonderland’
    ?

    in case of the longer names, you condition should look like:

    <?php if (is_page('down-the-rabbit-hole-to-wonderland') ): // page 1 ?>
<style type="text/css">
body {
background-color:#000;
background-image:url(<?php bloginfo('template_url'); ?>/images/body-bg.jpg);background-repeat:repeat;
}
</style>

    also, when calling images from within the php files, you need to use an absolute file path.

    generally, this kind of code should be in header.php, before the </head> tag.

    the page name’s are typed out…i was wondering about that …. and as far as header/body etc. i’m clueless lol like i said no clue what i’m doing was just copying from the other examples ?? i’ll give it a shot and let you know

    progress! okay now when i click on various pages i get a blank screen ?? so i’ll try to mess around and figure out how to get the image there….gonna sound stupid but what do you mean by absolute file path?

    this is an example of an absolute file path within a wordpress php file:
    url(<?php bloginfo('template_url'); ?>/images/body-bg.jpg)
    wordpress will use this <?php bloginfo('template_url'); ?> to generate something like:
    https://www.yoursite.com/wp-content/themes/yourthemename
    so in total your image path would look like:
    url(https://www.yoursite.com/wp-content/themes/yourthemename/images/body-bg.jpg)
    this is called an absolute file path.

    a relative file path is often used in the style.css, because the /images subfolder is in the same folder as the style.css:
    url(images/body-bg.jpg) would be a relative image path (because it is relative to the theme folder).

    making detours in modifying a theme is a great experience, because you learn much more on the way ??

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Change Background Image per page’ is closed to new replies.