FLOW theme -- how to fit collection banner image?

Store Design
, , ,
1

How do I fit the collection image in the banner so it is fit to the full width of the window? The image currently tiles if the window is too large. I want the image to stretch to fill the width of the banner image space, while maintaining the proper aspect ratio (assuming the top and bottom will be cutoff). I also want the image to be aligned vertically in the space (so the narrow strip of the image viewport goes across the middle of the image); it currently goes across the top of the image.

https://jcrty57uv82rmupf-8268827.shopifypreview.com/collections/da-rub

Any help you can provide is greatly appreciated!

2

  1. Navigate online store → theme → edit code.

  2. Opent theme.liquid and then pust follow code in {% style %}{% endstyle %}

.collection-header__bg-image {
background-size: cover !important;
background-position: center !important;

}