Different back ground images for Pages @ Wrapper ID

  • Resolved rams.wordpress

    (@ramswordpress)


    14 years, 6 months ago

    Hi All,
    I am using word press 3.0.1.
    I have problem while setting different background images for each pages.
    I want to background for wrapper id. not to the body.
    if anybody know please tell me how to set that.

    Thanks in advance

Viewing 13 replies - 1 through 13 (of 13 total)

  • Hi,

    I have the same question as above. I want to have a different background image on different pages for a wordpress website for a client. I’ve tried doing it in custom fields on pages, but the images never show up on the page.
    I’ve also tried:

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

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

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

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

<?php else : ?>

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

<?php endif; ?>

    and placed it in my header.php file just below <body>

    The image showed up but it pushed all of my content (header, sidebar, footer) down below it on the page. I need to know what/where to put in css stylesheet and I really want the background images to fit in the wrapper space, not fill the whole screen.

    Can anyone give me the right code for header.php and for css stylesheet? Or is there another way, possibly in custom fields?

    Thanks in advance.

    well, the same way you could assign body classes with post ID, couldn’t you do the wrapper?

    <div id="wrapper-<?php the_ID(); ?>">

    this would append the ID to the end of wrapper… like wrapper-234 or something

    you could then assign different wrapper css in style.css

    Thread Starter rams.wordpress

    (@ramswordpress)

    Hi All,
    Thanks for reply.

    I have got solution.I added the custom field value as background class for pages and dynamically i applied class to wrapper div.

    I still can not get this to work, no images show up.
    Can you tell me what you did exactly in custom field and also what/where in css stylesheet to get this to work?

    Thread Starter rams.wordpress

    (@ramswordpress)

    When go to add page in admin, u can see Custom field (m using wordpress3.0.1).
    add field name and value.
    I used same field name for diffrent page with different values.
    id header i wrote some code to get the background value

    $background_flag = get_post_meta($post->ID, "background", true);//get back ground class
	if($background_flag!=''){
		$background_class=$background_flag."_background";

	}

    then i applied the class to wrapper id (div) class=”<?php echo $background_class;?>”

    its working fine.
    Use this if u need

    I’m trying to do something similar only the only page I want different is the homepage. I’ve tried the code below but it only returns “wrapper” never “wrapper_home”

    In my homepage.php

    I placed:
    <?php $background_flag="homepage";?>
    Just before:
    <?php get_header(); ?>

    Then in my header.php

    I placed:

    <?php
if($background_flag=="homepage")
	$background_class=wrapper_home;
else
	$background_class=wrapper;
?>
<div class="<?php echo $background_class;?>">

    Just before:

    <div id="header">

    Any help is appreciated

    you might need to declare your variable as a global variable.

    does your theme use body_class() ?
    because if it did, having a different background for individual pages would be very simple working with the page specific classes, for instance .page-id-234 ….

    I found some info on body_class(). https://wpmu.org/how-to-use-the-body-class-tag-to-apply-custom-styles-to-wordpress-pages/

    I’ll give it a try. A scanning of the page makes me think this is the right path. Thanks.

    I got it to change the background color of the body…but, can I use this to change the wrapper background?

    See https://test.efreebn-sermons.org

    I want the red background to be tan.

    examples:

    .home .wrapper { background-color: #d2b48c; }

    or

    .page-id-123 .wrapper { background-color: #d2b48c; }

    Oh my. How simple. Thanks so much.

    Can I do something similar to change the color of the menu and footer fonts on the homepage?

    no problem;

    these are the corresponding styles:
    https://pastebin.com/zuuQidJQ

    to make the font colors different just for the front page, you could add these styles:

    .home .menu a, .home .menu a:visited {
	color: #d4c9b0;
}

.home .menu a:hover {
	color: #B19D74;
}

.home #footer p {
	color: #d4c9b0;
}

    (use color codes of your choice)

    This is so cool. I’ve spent several hours trying to figure this out. Trying very convoluted ideas that people have posted. This is SOOOO easy. Thanks.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Different back ground images for Pages @ Wrapper ID’ is closed to new replies.