Blurry homepage image with Debut theme

tree55
Tourist
10 0 2

Hi,

I've spent a good couple of hours trying to get my homepage image on my Debut theme to display correctly.

It looks pixelated and low resolution. I tried png, jpg and removing the colour profiles - still I've been unsuccessful.

All other the images across the site are sharp.

Any tips for resolving?

Here's the link to the site 

https://thegivingchristmastree.com

 

Replies 10 (10)
MS-WEB-DESIGNER
Shopify Partner
3012 181 490

Dear @tree55 

If you add high quality images then need to adjust through CSS

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
Ajay-app-dev
Shopify Partner
178 16 14

Hi @tree55  

Try this CSS

image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
tree55
Tourist
10 0 2

Thanks @Ajay-app-dev - do I add this code to theme.css?

Ajay-app-dev
Shopify Partner
178 16 14
Yes, if this doesn't work , let me know. Will help you out
Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
Ajay-app-dev
Shopify Partner
178 16 14

And, update me

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
tree55
Tourist
10 0 2

@Ajay-app-dev, thanks for confirming where to add the code.

 I've added it, but the image still isn't sharp.

Ajay-app-dev
Shopify Partner
178 16 14

@tree55 

Most of the time, it works. Maybe we need to look into the theme files. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
Starrla317
New Member
3 0 0

I had the same problem but I don’t know code can you tell me how to remove the gray overlay from my homepage display?

 

tree55
Tourist
10 0 2


##- Please type your reply above this line -

I didn’t resolve the issue. I’d love to know how.



Sent from my iPhone
Starrla317
New Member
3 0 0

I couldn’t fix it but instead I made the image bright and vivid so that it would look closer to the original but it actually came out looking great! StarrlasArt.com

Starrla317_0-1631803707601.png