Need help? Check out our Support site, then


Different header image on each page

  1. I am trying to have each page display it's own header image. Is there some way that I can do this? I am using the Misty Lake Theme and it has the featured image widget. Also, I bought the CSS upgrade.
    Thanks in advance, Will.

    The blog I need help with is elizabethsquest.com.

  2. There are 28 Featured Header WordPress Themes that allow you to designate one image for each post to display as your theme’s header when that post is viewed on its own page. http://theme.wordpress.com/themes/features/featured-image-header/

  3. YIKES! I just noticed this thread was in the CSS Forum and apologize for responding at all because I don't help with CSS editing. Please be patient while waiting for another to help you.

  4. Thank you Timethief, but I meant each Page, not each Post.
    -Will

  5. I am trying to use it as a website, not a blog.
    -Will

  6. You can do this, but it requires CSS for every page you want a different header on. The following example is for your contact page. One thing to note is that with this method, the header image is no longer linked to the main page of your site like it is with the normal header image.

    Upload the header images to the media library (Media > Add New), get the URL of that image and then replace URL_OF_IMAGE between the quote marks with the URL for that page.

    .page-id-79 .header-image {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
    .page-id-79 .header-image img {
        visibility: hidden;
    }

    Your news page would have a body class selector of "blog" so the selectors would look like this.

    .blog .header-image
    .blog .header-image img

    The photo gallery would be these.

    .page-id-69 .header-image
    .page-id-69 .header-image img

    The body class selectors can be found in the opening body tag if you go to the individual pages and view the source code and look for the opening body tag, which will start something like this.

    <body class="page page-id-69 page-template...

  7. Thank you very much, thesacredpath!
    -Will

  8. Will, you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic