How do I adjust the position of the header image on non-home posts and pages

It seems to me that this should be fixable with some customised CSS but nothing achieves the effect required. Here are the steps I’ve already taken…

First, its clear that element I need to alter the CSS for is
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img

However, changing the top: attribute for this (say, from 0 to 70px) shifts the cropped image downwards, revealing 70px of whitespace.

Meanwhile, this custom CSS pretty much achieves the desired effect:

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
position: fixed;
top: -15%; }

Unfortunately, this appears to also mess with the z-index in a way I can’t fathom. On single posts with a featured image the above custom CSS causes the header image to badly overlap the featured image, and so is not workable on its own.

I feel frustrated that my CSS skills aren’t up to this, but hopeful that the fix is an easy one.

With thanks, in hope.

Hi there,

Sorry I don’t have the answer to this but just wanted to add my interest in finding the answer!

I have searched and searched (also finding guitarpix post).

Same as yourself, I have a great header image that has the centre portion display on pages other than the home page, which just looks totally wrong for the image I am using.

Hopefully someone can help us solve how to change the image positioning within the element.

We can’t be alone in needing to figure this out ??

Hi !

I’m also looking for such a thing.
On my website the photo on the Home Page is great,
but the classic header page is awful … a “beautiful” zoom on my mouse and nose ??

It’s last issue I had … someone too help us out there ?

• This reply was modified 6 years, 11 months ago by jonkalamar.

This should work:

.has-header-image:not(.twentyseventeen-front-page):not(.home)
.custom-header-media img {
	transform: translateY(-20%);
}

Thank you @philipfil but the image moves only this way (a +20% for me would have been perfect) and do not fill the new gap created by the css.

Finally I changed the image, no time to spend on this project no more … but this solution do not satisfy me at all.

Thank for your help !

• This reply was modified 6 years, 7 months ago by jonkalamar.

I had same problem and developed a solution.

1) Look at the style.css in the TwentySeventeen theme.

2) Find the section that looks like this, and copy it to your child theme style.css and modify to fit your positioning goals.

3) Below is my modified version. The RELEVANT change is: object-position: 0% 25%;
See also: https://alligator.io/css/cropping-images-object-fit/

(Note this change is conditionalized on support of object-fit CSS, and likely won’t affect platforms without that support, and I have not tried to observe the problem nor fix it in that case.)

—

@supports ( object-fit: cover ) {
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
object-position: 0% 25%;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
width: 100%;
}
}

• This reply was modified 6 years, 7 months ago by johnww2.

Marvellous! I’ve only just had a chance to try this and it works great for me. Many thanks.

@johnww2 that’s brilliant thanks!

• This reply was modified 6 years, 3 months ago by creativepassion.