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
Topic summary
A Shopify store owner using the Impulse theme is experiencing issues with blog header images being cropped or cut off.
Problem: The featured image at the beginning of blog posts doesn’t display in its entirety—portions get trimmed.
Solutions Offered:
-
CSS modification: One contributor suggested adding custom CSS (
object-fit: fill) to force the image to fill the entire space, but this caused stretching for images with incorrect aspect ratios. -
Image resizing: Another user emphasized that the root cause is aspect ratio mismatch—the image dimensions don’t match the container size. They recommend resizing the source image to the proper dimensions.
-
Alternative CSS approach: A follow-up solution proposed using
background-imagewithbackground-size: containto display the full image without cropping, though this may leave empty space if aspect ratios don’t align.
Status: The discussion remains open with no confirmed resolution. The stretching issue persists, and the consensus points toward properly sizing the original image rather than relying solely on CSS fixes.
Hi @Ecomowner Do you want this?
is there a way to get the image to fill the entire space without it getting cut off
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.
Hi @Ecomowner
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- 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
some of the image looked stretched, is there a way to fix that
the image is going to stretch if it isn’t the right size. fix the image to the right size
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;
}
