Divi WordPress Theme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix Reply To: Shifting header image for not(.home) pages

Discussion in 'Misc WordPress Requests' started by jjon, Mar 29, 2018.

  1. jjon


    Reply To: Shifting header image for not(.home) pages, by jjon

    Thanks Ross. Yes, in retrospect it’s clear that was not the most edifying post. Indeed the whole end of a sentence failed to survive some copy/paste operation. As it happens, I managed to figure it out myself, so for those few who are as clueless as I: The solution lies in reading the CSS rule accurately.

    The relevant rule, in part, says this:

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: 100%;
    object-fit: cover;
    ... etc.

    The rule is for an img tag, and it says that the height of the image should be 100% of the container size. So long as that’s true, there’s no point moving the image around with transform, because the rest of the image isn’t there. (duh!) As soon as I figured that out, the solution was a little clearer:


    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: initial;
    left: 0;
    object-fit: cover;
    top: 0;
    transform: translateX(0%) translateY(-57%);

    height: initial gives you the whole image, which can then be moved around as needed to get that part of the main header image you want for the post or page header: transform: translateX(0%) translateY(-57%);

    Thanks again, and sorry for the noise.

    Reply To: Shifting header image for not(.home) pages

Share This Page

Monarch Social Sharing Plugin