CSS div background image change by page id

  • Hi,

    I’m trying to add images to https://www.allglobe.ca that change by page id. It isn’t the body background I’m trying to change it is a div background.

    In CSS I have

    .page-2{
    width: 920px;
    min-height: 340px;
    background-image: url(images/paper-bkg.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    overflow: hidden;
    }

    .page-7{
    width: 920px;
    min-height: 340px;
    background-image: url(images/news-bkg.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    overflow: hidden;
    }

    In the page.php file I have tried many different variations and I can’t get them to work

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

  • Hi

    I do it this way, adding this code block somewhere before the Div

    <?php
$class = '';
if (is_page('page-1')) {
  $class = 'page-1';
} elseif (is_page('page-2')) {
  $class = 'page-2';
} elseif (is_page('page-2')) {
  $class = 'page-3';
} ?>

<div id="content"<?php if($class) echo ' class=' . $class . '"'; ?>>

    Now I have a class assigned to the content div, based on the name of the page I am on.

    Then manipulate the CSS. It is not necessary to repeat the entire CSS block for each page. In my example I assign all CSS to #content and then specify the individual background images after it

    #content {
width: 920px;
min-height: 340px;
background-repeat: no-repeat;
background-position: right bottom;
overflow: hidden;
}
#content.page-1 { background-image: url(images/paper-bkg.jpg); }
#content.page-2 { background-image: url(images/news-bkg.jpg); }

    If you have a default background image, put it in #content. Then that image will display unless the default image is overridden by a styling rule below it.

    Thread Starter Ruth Maude

    (@dandelionweb)

    Thanks stvwlf but I can’t get it to work.

    If I put the background image in #content I see it but when I move it to the page class it is gone.

    then you don’t have the page class code working correctly.

    Do you have the Firebug extension installed in Firefox? If not I recommend it. With it you can point at a page element and see the classes and CSS assigned to that element.

    You can point at the #content on the screen and see the HTML – make sure the class is being assigned as intended when you are on a given page. If its not there is a name mismatch or something.

    you are aware that ‘page-1’ has to be the actual page slug of your WP page, and not page-1, yes?

    Is there a way I could use this for a navigation that’s in a

    • ? I want to use this as an image based navigation for all of nav items that are brought in from the pages.

    @fatheadesign – your message is a bit garbled, don’t quite get what you want to do. The general answer is yes this approach can be modified and used in many ways. The idea is to create a class that definitely indicates which page is being displayed, and then assign the needed CSS for each page.

    @stvwlf Sorry about that — I wasn’t sure how to word it properly.

    Heres my thread regarding my real question.

    https://www.ads-software.com/support/topic/264997?replies=4

    I’m trying to figure out how to something similar using the technique you provided.

    Trying to figure out how to target a class in css so I can apply a background image.

    Hi

    yes you can do exactly what you want to do. the problem you are having is what you are saying in CSS-speak is not what you think you are saying.

    In this line
    <li class="page_item page-item-25"><a href="https://bksfin.bendicart.com/financial-reporting/" title="Financial Reporting">Financial Reporting</a></li>

    TWO classes are being assigned to the LI tag. One is generic, to all the LI’s in the list, and one is specific to the one LI.

    This is your CSS
    .page_item page-item-79{color:#000}

    it is actually invalid because there is no tag named page-item-79, which is what your code is assigning the styling to, a page element page-item-79 contained within something that is in class page_item

    the way it will work is .page-item-79{color:#000} and you can have a thousand of those if you want them

    Hi,

    I am using this successfully. Thanks! One question, I would like the same style applied to a page and its children, is there a way I can do that without having to repeat the code for each page?

    <!-- start header -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
	    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
		<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
		<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<?php wp_head(); ?>
	</head>
<body>

<div id="container">
	<?php
               $class = '';
        if (is_page('page-40')) {
               $class = 'page-40';
        }?>

<div id="header"<?php if($class) echo ' class=' . $class . '"'; ?>>

		<div id="navmenu">
			  <?php wp_page_menu( array( 'show_home' => 'Home', 'sort_column' => 'menu_order' ) ); ?>
		</div>

	</div>	

<!-- end header.php -->

    I put the code stvwlf wrote in my code but it doesn’t work. I’m sorry, I’m quite new at this.

    I thought this tutorial I did might help clarify a little.
    How to use CSS to create a splash page

    Hope it helps ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS div background image change by page id’ is closed to new replies.