Adding custom background image to page-template(s) through php?

  • Hi,
    I am tweaking the theme JQ quite a bit for a website with mainly “static” pages. It is working fairly well but I have a question concerning background images:

    I need to have separate background images for several sections of the site. I will be using templates to customize the sections since there are a lot of other differences too. If I could call a specific background image in these templates by making a condition saying something like:

    if (h2.page_headline == “thisTitle”) {
    background-img = “thisPage’s-background-image.jpg”;
    };
    (I would know how to write this in Flash but not in PHP..)

    If that is possible I could actually use only one template for most of these pages. If not, I have to make a custom template for each of the individual sections/submenu-pages which will make it much more difficult to update for the customer.

    Because of several reasons the background images actually reside in a separate div in the pages. Which means I can’t put them in the CSS-file.

    Is there anyone that can help out there? ??

Viewing 15 replies - 1 through 15 (of 23 total)

  • I guess I’m not seeing why you can’t do this with CSS?

    Just add a unique ID to each page template and use that to style each of them with different background images.

    In fact, you could add the body class function to the body tag and specifically style any individual page or post:
    <body <?php body_class(); ?>>

    Thread Starter cesbloggan

    (@cesbloggan)

    Hi, yes I know that I can to do it with CSS. But since I am having a 100% background that also resizes according to browser window’s size I have put the backgroud image in a specfic div. Like this: https://www.cssplay.co.uk/layouts/background.html

    It would be really good too to be able to have everything that is in fact content (the bg-image is of course strongly connected to the pages in which it will reside), in the page not in the CSS-file.

    Just like you write, I would have to style every individual page with CSS. If I had a php-script (or something) determining which background is “connected” to which page through the content (in this case a specific header) I wouldn’t need to mark up every body_class or ID as connected to a specific background.

    One script in the template rather than 30 tags in the css-file..
    and the client will not need to worry about getting the wrong background when he makes a new page. Is that a good enough reason? ?? And/or do you have a better suggestion?

    OK, I thought it was the actual background image of that div, not an img tag in that div.

    You wouldn’t necessarily have to do every page separate with CSS; you could style every page, a group of pages, or a single specific page however you need to do it.

    But if you want the background image to scale like that you probably need to do it with an image tag like your example.

    It should be pretty easy to setup this up with conditional tags, you could load different images for different Page IDs, slugs, or templates something like this:

    <?php if (is_page('about')) : ?>

	<img src="<?php bloginfo('template_url'); ?>/images/bg-about.jpg" alt="" />

<?php elseif (is_page_template('page_ninjas.php')) : ?>

	<img src="<?php bloginfo('template_url'); ?>/images/bg-ninjas.jpg" alt="" />

<?php else : ?>

	<img src="<?php bloginfo('template_url'); ?>/images/bg-default.jpg" alt="" />

<?php endif; ?>

    Thread Starter cesbloggan

    (@cesbloggan)

    Hi again, Thanks for this.
    All these pages will have different content within the same structure/layout.
    In this case there is a header that will stay the same for all pages containing the same “bg-image”. Is it possible to search for the value of that header and through that retrieve the correct image?

    Hm, I’ll try seaching for page_headline. Can it be done this simple? 

    <?php if (is_page_headline('about')) : ?>

	<img src="images/bg-about.jpg" alt="" />

<?php elseif (is_page_headline('contact')) : ?>

	<img src="images/bg-contact.jpg" alt="" />

<?php else : ?>

	<img src="<?php bloginfo('template_url'); ?>/images/bg-default.jpg" alt="" />

<?php endif; ?>
    Thread Starter cesbloggan

    (@cesbloggan)

    HI again,
    it worked perfectly. Your solution that is and using page_is.
    Thanks! That will solve so many things!

    No problem, glad to help.

    @jleuze,
    @cesbloggan,

    Hey guys, I’m actually trying to do the same thing, but am a bit confused. I need to have a 100% bg image for each different Page on my WP site. I am using CSS to style the background image (the img source would be declared in the CSS specific to each page depending on what page they are in.

    My question is: What file does the if else statement go? How would I declare CSS in that conditional?

    Any help is appreciated.

    Hi pddiaz, you only need that conditional statement if you want to have different content, like an image, on each page.

    If you are adding your image through the stylesheet with CSS, you can target the body of any specific page if your theme has the body_class template tag.

    Hi JLeuze, I’m still trying to understand how to set up the conditional to check the page.

    Should the conditional statement replace the: <body class=”<?php semantic_body(); ?>”> ?

    If so, how would I write it so that this is the first class, and the depending on the page id, designate a new body_about{} style if the user went to the page titled About?

    Thanks for your continued help..

    Where and how you add the conditional PHP depends on what content you are trying to add to your pages.

    But you don’t need to add that to use different styles on the body depending on the page.

    What theme are you using? If it has, or you add, the body_class template tag, it will dynamically add classes to the body tag of your page, depending on which page you are on.

    For example, on the homepage of my site, these are the classes that are added to my body tag:

    <body class="home page page-id-93 page-template page-template-pagehome-php logged-in">

    So I could add rules to my stylesheet that only apply to the homepage by adding .home to them.

    Or take a look at this interior page on my site:

    <body class="page page-id-144 page-child parent-pageid-142 page-template page-template-default logged-in">

    I could style just this page by using the .page-id-144 class in my CSS.

    Hi JLeuze, thanks again for your help. I’m using wp-framework for a custom build, however I want to do what cesbloggan did above, assign a different full background image to each different page.

    I’m just unsure how I can do this still, are you saying I don’t need the conditional then?

    the wp-framework has this as the body tag: <body class=”<?php semantic_body(); ?>”>

    But I am unsure how I can edit or add body styles still.. I’m sorry for the slow learning curve, I’m not a php guy yet…

    So you are trying to achieve this effect with your backgrounds?

    I’m not sure how that body tag works in wp-framework, do you have a link to the site you are working on?

    Thats right, but I am using another CSS method.

    The link is: https://www.o-pd.com/HilaryHahn

    I would like to change the background for each different page on the nav.

    Right now this is how the body tag is in the header.php

    <body class=”<?php semantic_body(); ?>”>

    Thanks for the info, that helps a lot!

    So that semantic_body tag should totally do the trick, check out all the classes on your body tag on the home page:

    <body class="home singular y2010 m10 d16 h19 page pageid-17 page-author-admin page-template page-template-default windows firefox ff3">

    This is the CSS for your BG image here, at least in Firebug:

    body {
background:#000000 url(img/homeBG.jpg) no-repeat fixed center center;
color:#FFFFFF;
margin:0;
padding:0;
}

    So to apply that BG to just the homepage, alter it like this:

    body.home {
background:#000000 url(img/homeBG.jpg) no-repeat fixed center center;
color:#FFFFFF;
margin:0;
padding:0;
}

    Now, checkout the body tag for your about page:

    <body class="singular y2010 m10 d16 h19 page pageid-2 page-author-admin page-template page-template-default windows firefox ff3">

    To show a different BG image on the about page, simply add a new CSS statement:

    body.pageid-2 {
background:#000000 url(img/aboutBG.jpg) no-repeat fixed center center;
color:#FFFFFF;
margin:0;
padding:0;
}

    You should be able to style any specific page as it’s ID is added in the body classes.

    That did the trick. I really appreciate your patience and help with this small but extremely powerful method of using the body class. THANK YOU JLueuze!

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Adding custom background image to page-template(s) through php?’ is closed to new replies.