Getting the Header Image to Function Nicely on Twenty Seventeen with IE & Edge

I wanted to see if there is a problem doing it this way,

As far as I can see you’re implementing what is already being applied in the style.css file (of the parent theme) from lines 1727 to 1755. Is there a difference?

Hi Andrew,

The difference is Twenty Seventeen sets the transformY at 0. I’m setting it to 50%.
The header image is styled in the parent them at lines 1683 ~ 1700 as:
transform: translateX(-50%) translateY(-50%);

The parent theme at lines 1728 ~ 1736 overwrite the transform settings for the header image to:

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

Then, for Chrome, etc., the style is set to object-fit: cover and transform: none

What I’m doing is replacing the transform from the parent:
transform: translateX(-50%) translateY(0);
with:
transform: translateX(-50%) translateY(50%);

I’m setting the translateY to 50% instead of 0, which puts the image in the center, same as the object-fit does, without having to integrate anselmh’s polyfill.

This may be related.

my second question is why does the theme shift the header image around the way it does, first shifting it one way, then shifting it another way, and then canceling the shift?

On line 1683 the selector applies to the header image on all pages:

.has-header-image .custom-header-media img,

On line 1728 the selector applies to the header image on all pages except the Homepage

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img 

The header styles are different from the Homepage to the other pages, so without much investigation it makes sense to style them differently.

Please bear with me with anything obvious as it’s hard to get my ahead around & it’s the morning.

I’m just hoping you can work it out (I’ve seen your answers to other questions regarding Twenty Seventeen – you seem to be the go-to-guy for this theme).

My second question (which is more for educational purposes rather than a technical problem) was because I couldn’t get my head around first setting the header image to position: fixed; left 50%, then translating -50% (which puts it back to where it was, I think), and then changing for the individual pages (have a separate set of styles for the individual page header image makes sense, but the different translateX and Y values didn’t make sense to me).

If you’re not aware of the original logic behind the left and transform values for my second question, it’s not worth putting in the time. My main concern is if I override the translateY value from 0 to 50% (which should only be applicable to Microsoft browsers), am I at risk of screwing up the display on a unusual configuration (e.g. a Microsoft Surface).

Thanks,
Rich

Okay back to the more pressing question:

before putting the site online (it’s just running locally right now), I wanted to see if there is a problem doing it this way

No I don’t see anything wrong with your approach.

I think the reason the theme carries out the styles ‘On line 1683’ and ‘On line 1728’ is just so for refactoring reasons so that the non-Homepage banner inherits the height, left, max-width, max-height and min-width styles.

For that reason I think understanding the intention of the differences of -50% and 0 Y translation styles answers your first question:

why does the theme shift the header image around the way it does, first shifting it one way, then shifting it another way, and then canceling the shift?

It doesn’t do it with the intention of shifting the header image around. It does it with the intention of inheriting CSS styles. You will never physically see the header image being shifted one way and then another way because CSS runs very quickly and the developers probably knew this.

before putting the site online (it’s just running locally right now), I wanted to see if there is a problem doing it this way

I can see no problem.

• This reply was modified 7 years, 5 months ago by Andrew Nevins.

Thanks for your help (and all of your time writing up responses). I’ll trust that the changes in the child theme will work and move forward with the projects.