WordPress.org

Ready to get started?Download WordPress

Forums

CSS div background image change by page id (11 posts)

  1. Ruth Maude
    Member
    Posted 5 years ago #

    Hi,

    I'm trying to add images to http://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

  2. stvwlf
    Member
    Posted 5 years ago #

    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.

  3. Ruth Maude
    Member
    Posted 5 years ago #

    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.

  4. stvwlf
    Member
    Posted 5 years ago #

    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?

  5. fatheaddesign
    Member
    Posted 5 years ago #

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

  6. ? I want to use this as an image based navigation for all of nav items that are brought in from the pages.
  • stvwlf
    Member
    Posted 5 years ago #

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

  • fatheaddesign
    Member
    Posted 5 years ago #

    @stvwlf Sorry about that -- I wasn't sure how to word it properly.

    Heres my thread regarding my real question.

    http://wordpress.org/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.

  • stvwlf
    Member
    Posted 5 years ago #

    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="http://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

  • surfeuse
    Member
    Posted 4 years ago #

    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?

  • bigtukker
    Member
    Posted 4 years ago #

    <!-- start header -->
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://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.

  • cmunns
    Member
    Posted 4 years ago #

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

    Hope it helps :)

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags