[SOLVED] How to show 1 specific header image on a static page and on Cat. pages

Sakshin · #1 Aug 26, 2009, 08:23 AM

The question is simple; for each page I would like to have a specific header image instead of rotating images. How can this be achieved? And I would like to do the same for categorie archive pages as well.

I'm using 342

Thanx, Sakshin.

Flynn · #2 Aug 27, 2009, 06:34 PM

At Configure Header Area, instead of %image use

<div id="imagecontainer"></div>

Add CSS Inserts

For a default image

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/path/to/image.jpg);
}

For specific pages look into the source code of each page for
<body class="page page-id-105 other-classname...">

Use a unique classname for page specific CSS Inserts:

body.page-id-105 div#imagecontainer {background-image: url(/path/to/image2.jpg)}
body.page-id-23 div#imagecontainer {background-image: url(/path/to/image3.jpg)}

... etc...

Sakshin · #3 Aug 28, 2009, 10:05 AM

I tried to implement the code above. The div replace the %image like this <div id="imagecontainer"></div>

And in the css insert I placed a few different option, none of them showing any image, the whole image field disappeared. What to doo?

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_home.jpg)
}

body.page-id-197 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_archief.jpg)
}

body.page page-id-2 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_about.jpg)
}

body.page page-id-187 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_contact.jpg)
}

Flynn · #4 Aug 28, 2009, 05:12 PM

Sorry use

<div id="imagecontainer" class="header-image-container"></div>

instead of

<div id="imagecontainer"></div>

If you want to add the opacity areas, which are missing now, use

<div id="imagecontainer" class="header-image-container">
<div class="opacityleft"> </div>
<div class="opacityright"> </div>
</div>

instead.

And, body.page page-id-2 is wrong, should be body.page-id-2

Sakshin · #5 Aug 29, 2009, 12:11 AM

I don't want to use the opacity, but it's good to know how to do that. And the images still don't show. gone, foetsie, away.

juggledad · #6 Aug 29, 2009, 09:16 AM

What's your url and where is the problem happening?