Different header image on each page

  • Author
    Posts
  • #1649659

    equest1812
    Member

    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.

    #1649727

    timethief
    Member

    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/

    #1649730

    timethief
    Member

    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.

    #1649734

    equest1812
    Member

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

    #1649735

    equest1812
    Member

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

    #1649754

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

    #1649761

    equest1812
    Member

    Thank you very much, thesacredpath!
    -Will

    #1649763

    Will, you are welcome.

The topic ‘Different header image on each page’ is closed to new replies.