How to position the image at top center in the image banner on desktop only in the Dawn Theme?

[thor24]

Setting up a webshop here and using the Dawn theme. 

Does anyone know how I can position the image in the image banner at top center on desktop only. On mobile it is middle center and that is fine. 

I am using an image size 1600x1050 as recommended for the image banner. 

I have been looking for a solution to this with no luck so far. I hope you can help. 

[Matusalab]

Hey @thor24 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Matusalab

[thor24]

Hi Matusalab

The url is definitioner.myshopify.com and there is no password. 

Thank you so much!

[thor24]

Thank you very much! That was a fast answer.

I did what you said, but it does not change anything. But may I explain it in a clumsy way?

What I am looking for is to position the image in the mage banner so the top center of the image is visible on desktop. Right now the top and bottom are cut off. 

I am using the small container for the image banner by the way. 

[thor24]

Thank you so much again. That did not work though. Do you need any other information from me?

[thor24]

Sure. I am using the newest update of the Dawn theme. And on the home page I have several Image banners, where the image gets cropped at both top and bottom on desktop, but looks fine on mobile as you can see in the attached pictures.

I am using the image banner with the banner height set to small in the settings. 

Is it possible to position the image on desktop so the top of the image is visible? It is fine if the bottom of the picture gets cropped on desktop. 

[thor24]

Thank you so much. But it does not change anything. What do you think it could be then?

[thor24 · Accepted solution]

Thank you so much for your help. I have found out how to do it now. 

Adding this to the custom css section in the settings of the theme works:

@media only screen and (min-width: 750px) {
.banner > .banner__media > img {
object-position: top;
}
}