WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. cesbloggan
    Member
    Posted 3 years ago #

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

  2. Josh Leuze
    Member
    Posted 3 years ago #

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

  3. cesbloggan
    Member
    Posted 3 years ago #

    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: http://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?

  4. Josh Leuze
    Member
    Posted 3 years ago #

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

    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; ?>
  6. cesbloggan
    Member
    Posted 3 years ago #

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

  7. Josh Leuze
    Member
    Posted 3 years ago #

    No problem, glad to help.

  8. pddiaz
    Member
    Posted 3 years ago #

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

  9. Josh Leuze
    Member
    Posted 3 years ago #

    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.

  10. pddiaz
    Member
    Posted 3 years ago #

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

  11. Josh Leuze
    Member
    Posted 3 years ago #

    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.

  12. pddiaz
    Member
    Posted 3 years ago #

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

  13. Josh Leuze
    Member
    Posted 3 years ago #

    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?

  14. pddiaz
    Member
    Posted 3 years ago #

    Thats right, but I am using another CSS method.

    The link is: http://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(); ?>">

  15. Josh Leuze
    Member
    Posted 3 years ago #

    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.

  16. pddiaz
    Member
    Posted 3 years ago #

    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!

  17. Josh Leuze
    Member
    Posted 3 years ago #

    No problem, body classes are such a handy trick.

  18. Graf007
    Member
    Posted 3 years ago #

    Sorry I am new to wordpress. I am trying to get a background on a specific page and i understand that I can use a body tag, but can someone break it down for me. I tried doing the above and it isn't working for me. I am sure I am doing something stupid. Many thanks.

  19. Josh Leuze
    Member
    Posted 3 years ago #

    Does your theme have the body_class function? Could you post a link to the page you are having problems with?

  20. Graf007
    Member
    Posted 3 years ago #

    Thanks for responding JLeuze!

    I am totally lost has to how to do this with the template that I have.

    I want to have a video page with a different background for just that page.

    That page is at http://eve-online-dark-taboo.com/blog7/?page_id=4

    Any help would be appreciated. I have gone here:

    http://codex.wordpress.org/Function_Reference/body_class

    But i can't make heads or tails as to if my theme will access the post-template.php

    Many Thanks!

  21. Josh Leuze
    Member
    Posted 3 years ago #

    The link you posted is broken for me, but it looks like you are using the Arras theme which has the body_class function, or something similar.

    Take a look at the body tag on this page:

    <body class="page page-id-2 page-template page-template-default">

    So adding this to your stylesheet would change the background of just that page to black:

    body.page-id-2 {
    background:#000000;
    }
  22. Graf007
    Member
    Posted 3 years ago #

    Dear JLeuze,

    I got it to work! I got it to work for a catagory.

    But, I can't seem to get it to work for a tag. i look at a post for a tag and the body class doesn't spit out the tag info?

    Ideas?

    Many Thanks!

  23. Josh Leuze
    Member
    Posted 3 years ago #

    For some reason, Arras has its own custom body class function:

    <body <?php arras_body_class() ?>>

    Doesn't look like it supports tags, but the standard WordPress body class function does.

  24. car57
    Member
    Posted 3 years ago #

    Can anyone explain what is the difference between a body class of "single" or "singular"? I've looked at the Thematic dynamic-classes.php and it provides the exact same comment about those two classes, and I cannot figure out how a particular "page" gets a class singular vs or in addition to a class single. Can anyone explain?

    And how would I go about turning off some of the humongous number of dynamic body classes generated by Thematic? (I understand the general principle of filters, but I need to know specifics: what php file to put what code into to turn off body classes I don't want)

    TIA

Topic Closed

This topic has been closed to new replies.

About this Topic