WordPress.org

Ready to get started?Download WordPress

Forums

background image (15 posts)

  1. stargatesg1
    Member
    Posted 6 years ago #

    Is there a plug in where you can specify a background image for different page sections?

  2. garyploski
    Member
    Posted 6 years ago #

    I'm looking for the same thing stargatesg1. Plugin, css or another method would be excellent.

    I'd like to put a different background image on each page of this site:
    http://garyploski.com/actor

    Thanks for any/all ideas suggested.

  3. garyploski
    Member
    Posted 6 years ago #

    Additional thoughts anyone? Thanks.

  4. mores
    Member
    Posted 6 years ago #

    use a function to extract the image that is attached to a post or page and display it in the background.

    Step1: check the extraction process here: http://wordpress.org/support/topic/140609?replies=39

    Step2: in your header, use the function to define the body background.

  5. garyploski
    Member
    Posted 6 years ago #

    Thanks mores.

    I"ll look into this/give it a try tonight.

  6. mrichard
    Member
    Posted 6 years ago #

    Just thinking you could try using custom tags in the admin, put the image url in there and then just do something like -

    Create custom tag called BGIMAGE with the image url as the value. Then use this in the head of the header file....

    <?php $key = "BGIMAGE";
    $BGIMAGE = get_post_meta($postID, $key, true); 
    
    if(!empty($BGIMAGE)) { ?>
    <style>
    body {
    background-url:('<?=$BGIMAGE; ?>');
    }
    </style>
    <?php } ?>

    Hope that helps.

    Marc

  7. garyploski
    Member
    Posted 6 years ago #

    Thanks for the idea Marc.

    Could you elaborate on this point "try using custom tags in the admin" - I don't follow. Do you mean for each page?

    I would put your sample code into the HTML for each page... y/n? If so I believe I understand up to the original point noted above.

    Sadly I didn't get to try either suggestions - late night. Hopefully I'll have a chance in the AM.

  8. mores
    Member
    Posted 6 years ago #

    gary ... when you write a post or a page, underneath the text-input area you have advanced options like excerpts, trackback and custom fields.
    Click on custom fields, write "BGIMAGE" into the "key" part, and the link to your file in the "value" box.

    marc's code then needs to be implemented in the header.php file of your template,
    somwehere right before the < body > tag.

  9. garyploski
    Member
    Posted 6 years ago #

    Thanks mores.

    It dawned on me while I was getting ready for bed -- I've never considered that section. Sweet! Thanks for specifying.

    I just tried Marc's idea/code and can report that it did not work. I chose an image of mine and another image elsewhere into two pages.

    http://garyploski.com/actor/about/ (using: http://www.sixapart.com/i/wrench_hat.jpg)
    and
    http://garyploski.com/actor (using: http://garyploski.com/actor/wp-content/gallery/theatre/153_5354.jpg)

    I paste the code in the following three places:

    <?php wp_head(); ?>
    </head>
    HERE
    <body>

    <?php wp_head(); ?>
    HERE
    </head>
    <body>

    HERE
    <?php wp_head(); ?>
    </head>
    <body>

    I'm using the HemingwayEX 1.1 theme. As a test I tried with the Default template as well - still didn't work.

    It's a great idea Marc and would make this idea fly. With this in mind, is there something I might be missing?

  10. mores
    Member
    Posted 6 years ago #

    hmmm, you know what, I think it's due to the fact that marc's code needs to know, what post-id we're currently looking at, and that information is only available inside the loop - not embeddable in the header.

    I don't know how do do this any better, but here's a little plugin for you:

    <?php
    /*
    Plugin Name: MetaBackGround
    Plugin URI: http://www.mores.cc/metabackground
    Description: Backgroundimages for posts and pages. Add a custom field called BGIMAGE with the absolute link to your desired background image.
    Version: 0.0.1
    Author: Mores Daniel
    Author URI: http://www.mores.cc/
    */
    
    add_action('wp_head', 'mores_metabackground');
    
    function mores_metabackground() {
    	global $post;
    
    	$key = "BGIMAGE";
    	$BGIMAGE = get_post_meta($post->ID, $key, true);
    
    	if(!empty($BGIMAGE)) {
    		echo "\n<style>\nbody{background: url('".$BGIMAGE."');}\n</style>\n";
    	}
    } ?>

    Copy the code, paste it into a text file, name it "metabackground.php" or whatever, upload to your plugin directory, activate, and wallah. It'll put the code where it needs to go.

    If you know what kind of backgrounds you use, you might want to edit the actual style definition so that your background image is properly aligned, repeated etc.

    You can also download it from here: http://www.mores.cc/metabackground
    :)

  11. garyploski
    Member
    Posted 6 years ago #

    Wow. Great thinking. Here are some test results.

    Default - no image displays in home or about
    Classic - image displays in home and about
    HemingwayEX - images displays in what appears to be the footer only
    NinjaMonkeys 0.20 - images displays in what appears to be the footer only

    I've left HemingwayEX active so the result can be seen. Thank you so much for putting your time into this mores.

  12. mores
    Member
    Posted 6 years ago #

    In Hemingway it's due to the number of layers with background-color definitions that cover the image. Must be the same for the others, so you'll need to get rid of all the unnecessary background colors in the appropriate stylesheet.

    BUT, you might want to put the image only in a certain part of the page. Try editing the plugin so that the image is not background of the entire body, but of the layer you want it to display in.
    In hemingway this might be "primary", so change

    echo "\n<style>\nbody{background: url('".$BGIMAGE."');}\n</style>\n";

    to

    echo "\n<style>\n#primary{background: url('".$BGIMAGE."');}\n</style>\n";

    (By the way, the \n is a control character that returns a line-break, so that the source-code is more easily debuggable.)

    I'd have to do a lot of fiddling to get it just right for your template. Try disabling any background colors first, then see what it looks like.

  13. garyploski
    Member
    Posted 6 years ago #

    It's working! Thank you so much.

    The change to this code made all the difference:

    echo "\n<style>\n#primary{background: url('".$BGIMAGE."');}\n</style>\n";

    I've added background pix to about 4 pages. Fantastic!

  14. IAM4
    Member
    Posted 5 years ago #

    Hallo Mores!

    First of all, thanks for your plugin, it was exactly what I was looking for.
    But as always, we need to customize, I´m absolute new to php, css and so on, but I was able to modifie everything I wanted ´till now.
    My question is: can I set the position of the background (top center) and no-repeat?

    the site is here: http://www.grandtour.at

    the page in question is the splash page.

    Ich danke schon im voraus!

  15. bretttorrium
    Member
    Posted 5 years ago #

    i am a little tech-dumb. i would like to do the same thing on my blog: have all the pages have the same background as the homepage. how do i do this?

    http://www.bretttorrium.com

Topic Closed

This topic has been closed to new replies.

About this Topic