Support » Themes and Templates » Different background images on pages

  • In my TwentyEleven theme I have a CSS code that displays a background-image. But this is the same for all pages.

    #page {
    background-color: #4169E1;
    background-image: url(images/Lightning8.jpg);
    background-repeat: repeat;
    background-position: center top;
    }

    What I would like to do is to have a different background-image on each page.

    Can somebody tell me how to do this?

    Thank you

Viewing 15 replies - 1 through 15 (of 17 total)
  • Every page has its own body ID, take a look at your source code (on live site)… something like

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

    So you can use #page-id-7 for setting different backgrounds…

    I’m sorry but I’m new to this.
    Where do I include this?
    I tried in my CSS file but it doesn’t work.

    #page-id-2 {
    background-image: url(images/Lightning8.jpg);
    background-repeat: repeat;
    background-position: center top;
    }

    What am I doing wrong?

    Sorry I’ve made a mistake in my previous post…
    It’s a class and no ID… so use .page-id-2 instead of #page-id-2

    Full css must look like this

    .page-id-2 {
    background-image: url(images/Lightning8.jpg);
    background-repeat: repeat;
    background-position: center top;
    }

    I tried this as well but what it does is that it gets rid of my page background it simply disappears. I’m a bit confused. Of course my CSS file can be completely bad. So I was wondering is it possible for me to send you my CSS file so that you can look at it?

    If this is possible please write your email.

    Thank you

    The background only should appaear at the page with ID2… isnt it?

    Would be nice if you could post your website link 🙂
    So I can have a look at the css…maybe your new rule was overwritten by something else…

    I can’t. It is not finished yet. It is on my local machine.
    How about your email so I can send the CSS file to you.

    You can just post your css through http://pastebin.com/ 🙂 so maybe other users can help you also 🙂

    I posted my CSS code to the site you recommended.

    mmhhh… now I need the link to the posted code 🙂 After submitting your code to http://pastebin.com/ you’ll a get a URL in your browser like http://pastebin.com/CLfa2DfD and now I need your URL from the posted CSS 🙂

    Here it is

    Well seems very good…
    Now you just need to add this in your css

    #page {
    background-color: #4169E1;
    background-repeat: repeat;
    background-position: center top;
    }
    
    .page-id-2 {
    background-image: url(images/Lightning8.jpg);
    }

    So every page has #4169E1 as background-color and the page with ID2 should have Lightning8.jpg as background…

    Thank you for all the help, but it still doesn’t work. Is there anything else I should do for this to work. Is there something in my page.php file I should do different?

    <?php
    /**
     * The template for displaying all pages.
     */
    get_header(); ?>
     <div id="primary">
      <div id="content" role="main">
       <?php while ( have_posts() ) : the_post(); ?>
       <?php get_template_part( 'content', 'page' ); ?>
       <?php endwhile; // end of the loop. ?>
      </div><!-- #content -->
     </div><!-- #primary -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    [Moderator Note: Please post code or markup snippets between backticks or use the code button.]

    Seems to be fine, but have a look at your header.php, if there is <?php body_class();?> missing in the <body> tag…

    Correct

    <body <?php body_class();?> >

    Not correct

    <body>

    it should be:

    .page-id-2 #page { background-image: url(images/Lightning8.jpg);

    .page-id-2 is the css class of the body tag on the page with the ID 2;
    #page is the css id of the central div.

    in total, you should have:

    #page {
    background-color: #4169E1;
    background-image: url(images/Lightning8.jpg);
    background-repeat: repeat;
    background-position: center top;
    }
    .page-id-2 #page { background-image: url(images/WhatEverBackground2.jpg);
    .page-id-17 #page { background-image: url(images/WhatEverBackground172.jpg);

    /*repeat for each page with a individual background;
    just change the page id and the image*/

    btw:
    important – do not edit Twenty Eleven directly – create a child theme to work with: http://codex.wordpress.org/Child_Themes

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Different background images on pages’ is closed to new replies.