Collection page banner blurry on large monitor and whole image does not display

[RuStar]

Hi,

Can you please help me with the shopify collection image. On a larger screen is displays blurry and you cant see the whole image. On my mobile phone is it not blurry.

Thank you in advance.

[David_SHT]

Hi @RuStar

This is David at SalesHunterThemes.
Just checked your store and found that the collection image on your page is small size,
So when view on the large screen, it will shows blurry,
To fix the problem, I think you need to use an image larger
The width of the image at least has the same size as the screen.
I think It will make the image looks better on large screen

[INA_MSWEB]

Hi @RuStar

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:
.collection-hero__title-wrapper::before {background-color: #6858582b !important;}

Regards,

San

[Dan-From-Ryviu]

You can solve by adding this CSS code at the bottom of theme.css file

@media screen and (min-width: 993px) {
.collection-hero__image { background-size: contain !important; }
}

[RuStar]

Hi San, thank you for responding.