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, 1 month ago by johnww2.
