not entire image showing

[Ecomowner]

does anyone know how to make an entire image so on a blog for impulse theme , the image gets cut off. Its an image that goes at the beginning of the blog

[LizHoang]

Hi @Ecomowner Do you want this? 

[Ecomowner]

is there a way to get the image to fill the entire space without it getting cut off

[bryan76]

you are trying to fit an image of a different aspect ratio in the box.   the image needs to be the proper size for it to look right.  

[DaisyVo]

Hi @Ecomowner 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.collection-hero img.collection-hero__image {
    object-fit: fill !important;
}

Here is the result: 

I hope this helps

Best,

Daisy

[Ecomowner]

some of the image looked stretched, is there a way to fix that

[bryan76]

the image is going to stretch if it isn't the right size.  fix the image to the right size

[DaisyVo · Accepted solution]

Hi @bryan76  @Ecomowner 

You can try this code

.collection-hero img.collection-hero__image {
    opacity: 0 !important;
}
.collection-hero:has(img.collection-hero__image) {
    background-image: url("https://look-authority.com/cdn/shop/articles/irc_nrCvds1UyMNDZ8zLaS-dBQ7FDbTL_1944x.jpg?v=1740889723");
    background-size: contain;
}