How to choose different header images for different pages?

magdanicola · Member · Oct 9, 2015 at 6:55 pm
Copy link

Add topic to favorites
Hi, I’ve seen discussions on this topic already but somehow following the suggestions I’m still not able to choose different header images for different pages.
My website is this one:
http://bienkocrosettolabs.org/

And for instance I’d like to select one picture for the contact page, instead of having random choices like I have for all the others.

I tried to do this:

.page-id-334 .header-image { background: url(“https://bienkocrosettolab.files.wordpress.com/2015/07/cropped-dsc0180.jpg”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.page-id-334 .header-image img {
visibility: hidden;
}

But is somehow doesn’t work. I’d appreciate your help.
Thanks!
Magda

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 9, 2015 at 7:41 pm
Copy link
Hi there, CSS is theme specific, and the code needed on Penscratch is going to be different. Since there isn’t a direct div with a CSS class or id surrounding the header image, we need to use a little CSS attribute trick like this.
```
.page-id-334 img.custom-header {
    visibility: hidden;
}
.page-id-334 #content a[rel="home"] {
    background: url("https://bienkocrosettolab.files.wordpress.com/2015/07/cropped-dsc0180.jpg") no-repeat scroll 0 0 /cover;
    display: block;
}
```
magdanicola · Member · Oct 10, 2015 at 6:13 am
Copy link
Hi! Many thanks for your help. I have tried that now, but the new image, which I want to have, stays behind the default header image. Any suggestions?
magdanicola · Member · Oct 10, 2015 at 6:46 am
Copy link
OK, it looks like it works on some pages but not others… I have it working here:

Contact

Crosetto Lab

and partially here
http://bienkocrosettolabs.org/research-in-the-bienko-lab/

I write partially as it changes the dimensions of my picture. How can I specify the proper dimensions?

I’d be curious to know why it doesn’t work on the Home page and the People page (for the others I didn’t change).

Thank you!
magdanicola · Member · Oct 10, 2015 at 6:55 am
Copy link
Oh, now I see. Since I chose “Randomize header image” and since all my default images have different dimensions, the size of my new custom images changes depending on which of the default images gets chosen. That explains why some of my custom images lose their proper dimensions every now and then. I deactivated the randomization now.
magdanicola · Member · Oct 10, 2015 at 7:38 am
Copy link
OK, looks like all is working now. Sorry for all these writings.
Thanks!
thesacredpath · Member · Oct 10, 2015 at 3:34 pm
Copy link
No worries and glad you got it all figured out, and of course, you are welcome. :)

No items found.