Grow your CSS skills. Land your dream job.

how to get different bg image on group of pages

  • # July 26, 2010 at 4:06 pm

    I have a site that needs three different background images at the moment.

    The most common one is just set by default via CSS.

    The second one, for the home page, is set using the body class, as such:

    Code:
    body.home .topdiv{
    background:url(images/topbg_h.jpg) no-repeat top center;
    }

    The one I’m having a problem with is defining a particular background for for landing pages. It will be the same image, and there will be many landing pages, so I don’t want to manually add a CSS class for each page.

    Is there an easy, scalable way to do this?

    # August 4, 2010 at 1:42 am

    You can add this:

    Code:
    <?php body_class(); ?>

    to your <body> tag in your header.php file. This will auto-generate a bunch of classes for you on the body tag. I assume your landing pages will all be in the same category? Or, if they are pages instead of posts, they’ll all use the same page template. If they use the same page template, this function will add a class specifically for that.

    Good luck!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".