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

  • Resolved robertsharp

    (@robertsharp)


    8 years, 7 months ago

    Hi everyone, I’d like to re-open the discussion first raised by @guitarpix earlier this year: how can one take control of the header image on pages that are not the home page.

    On my site I have a strong header image which is perfect for my home page. However, when that image appears on pages that are not the home page, the rendering is Laughably unfortunate.

    I can see why the default rendering is as it is. The header image is CENTERED within the element vertically and horizontally, and so the rendering is just the middle portion of the image.

    However, I would like to shift the image down in its element so that a different, more aesthetically pleasing segment appears.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter robertsharp

    (@robertsharp)

    8 years, 7 months ago

    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.

    Poole Windsurfing

    (@poole-windsurfing)

    8 years, 7 months ago

    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 🙂

    jonkalamar

    (@jonkalamar)

    8 years, 7 months ago

    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 8 years, 7 months ago by jonkalamar.
    Philip

    (@philipfil)

    8 years, 2 months ago

    This should work:

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

    (@jonkalamar)

    8 years, 2 months ago

    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 8 years, 2 months ago by jonkalamar.
    johnww2

    (@johnww2)

    8 years, 2 months ago

    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 8 years, 2 months ago by johnww2.
    Thread Starter robertsharp

    (@robertsharp)

    8 years, 2 months ago

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

    creativepassion

    (@creativepassion)

    7 years, 10 months ago

    @johnww2 that’s brilliant thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘How do I adjust the position of the header image on non-home posts and pages’ is closed to new replies.