WordPress.org

Ready to get started?Download WordPress

Forums

Different background images on pages (18 posts)

  1. sine184
    Member
    Posted 2 years ago #

    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

  2. egado
    Member
    Posted 2 years ago #

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

  3. sine184
    Member
    Posted 2 years ago #

    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?

  4. egado
    Member
    Posted 2 years ago #

    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;
    }
  5. sine184
    Member
    Posted 2 years ago #

    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

  6. egado
    Member
    Posted 2 years ago #

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

  7. sine184
    Member
    Posted 2 years ago #

    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.

  8. egado
    Member
    Posted 2 years ago #

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

  9. sine184
    Member
    Posted 2 years ago #

    I posted my CSS code to the site you recommended.

  10. egado
    Member
    Posted 2 years ago #

    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 :)

  11. sine184
    Member
    Posted 2 years ago #

    Here it is

  12. sine184
    Member
    Posted 2 years ago #

  13. egado
    Member
    Posted 2 years ago #

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

  14. sine184
    Member
    Posted 2 years ago #

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

  15. egado
    Member
    Posted 2 years ago #

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

  17. sine184
    Member
    Posted 2 years ago #

    This one works for me
    .page-id-2 #page { background-image: url(images/WhatEverBackground2.jpg);

    So thank you all for taking some time to help.

  18. Mustafa7
    Member
    Posted 2 years ago #

    Hi,

    I couldn't find any of the stuff above. Where should I put

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

    Is it in style.CSS?

    (I'm using twentyeleven Version 1.5 and wordpress 3,5)

    I Hope anyone can help me.

Topic Closed

This topic has been closed to new replies.

About this Topic