WordPress.org

Forums

Change Background Image per page (25 posts)

  1. kons
    Member
    Posted 5 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

  2. Shoshin
    Member
    Posted 5 years ago #

    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)

  3. esmi
    Forum Moderator
    Posted 5 years ago #

    A link to your site might help. Help is free but psychic costs extra. :-)

  4. PBP_Editor
    Member
    Posted 5 years ago #

    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 ?>
  5. Shoshin
    Member
    Posted 5 years ago #

    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.

  6. PBP_Editor
    Member
    Posted 5 years ago #

    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 ?>
  7. Shoshin
    Member
    Posted 5 years ago #

    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.

  8. PBP_Editor
    Member
    Posted 5 years ago #

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

  9. Shoshin
    Member
    Posted 5 years ago #

    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.

  10. wonderlandbaby
    Member
    Posted 5 years ago #

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

  11. alchymyth
    Forum Moderator
    Posted 5 years ago #

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

  12. wonderlandbaby
    Member
    Posted 5 years ago #

    yeah that would make sense :)
    http://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

  13. alchymyth
    Forum Moderator
    Posted 5 years ago #

    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.

  14. wonderlandbaby
    Member
    Posted 5 years ago #

    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

  15. wonderlandbaby
    Member
    Posted 5 years ago #

    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?

  16. alchymyth
    Forum Moderator
    Posted 5 years ago #

    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:
    http://www.yoursite.com/wp-content/themes/yourthemename
    so in total your image path would look like:
    url(http://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 ;-)

  17. wonderlandbaby
    Member
    Posted 5 years ago #

    hmm okay i'll see what i can do with this.... thank you so much i am so over my head :-P honestly have no clue what i'm doing other than following directions :) i'm a point and click kinda girl ;)

  18. wonderlandbaby
    Member
    Posted 5 years ago #

  19. wonderlandbaby
    Member
    Posted 5 years ago #

    still having trouble with links... someone suggested trying it in the header, but that didn't seem to work either

  20. blobon
    Member
    Posted 5 years ago #

    hi PBP_Editor
    I have the atahualpa theme and i have the same problem to Change Background Image per page.

    if i put this code
    backticks<?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>backticks

    at the top of the css.php appears a parse error.

    Where i do put that code
    Thanks a lot

  21. thecookiemonster
    Member
    Posted 5 years ago #

    Found this. maybe it helps some.
    works good on my site. i made it select random images for my header bg.

    http://ma.tt/scripts/randomimage/

  22. fergurson
    Member
    Posted 5 years ago #

    Hi there, i am trying to create image background for different pages, i want each page to have it's own background, can any one try to see if what i have done is correct, it not showing me what want, bellow is the code and it is in my header.header.php

    <style type="text/css">
    <?php $page_id=get_the_ID();
    if(is_page()) { $image='partners'.$page_id='2'.'.jpg';
    if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='partners.jpg'; }
    echo '#page { background-image: url(images/'.$image.'); }'; }; ?>
    </style>

    Please help.

  23. shi
    Member
    Posted 4 years ago #

    Hi, i want to change the content_wrap section to a different image background per page. I tried the above just changing the background and it worked, but on the website im working i want one static background colour and the image in the content_wrap section to change.

    so instead of body {} i changed it to content_wrap{} but it didnt work. any idea? for example:

    <?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">
    content_wrap {background-color:#000;background-image:url(/images/background.jpg);background-repeat:repeat;}
    </style>

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

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

  24. shi
    Member
    Posted 4 years ago #

    dont worri i figured it out. from the aboce the body didnt have a # infront of it, i just put #content_wrap and it worked. no need to reply@!

  25. rmdivito
    Member
    Posted 4 years ago #

    I am having problems with the BG image not showing up. BG colour works. here is the code:

    <?php if (is_page('photography') ): ?>
    <style type="text/css">
    body {background-image:url(<?php bloginfo('template_url'); ?>/library/styles/custom/img/texture_bg1.jpg) repeat top center;}
    </style>

    The complete path is:
    http://localhost:8888/wordpress/wp-content/themes/shapeshifter/library/styles/custom/img/texture_bg1.jpg

    Any help would be appreciated.

    best,

    rob

Topic Closed

This topic has been closed to new replies.

About this Topic