Landing page background image gets blurry when making window smaller

[youngdjn]

Hello -- I'm loving Docsy, but I've noticed that on my site, as well as the Docsy site and the Goldydocs demo site, the background image (featured-background.jpg) for the landing page gets blurry when I reduce the window size. For example, here's a closeup of the Docsy background image when my browser window is at full width:

And here's an example with browser window at 75% of my screen's width:

There is a sudden transition from crisp to blurry right at this transition in window width, even though the image does not appear to be getting scaled. On mobile devices (smaller screens), the image is always in its blurry form.

I did a bit of searching on CSS image scaling etc (e.g. here and here) but nothing worked.

Any thoughts on how to prevent this? Thanks in advance!

[fekete-robert]

Hi, I believe this is due to the way Hugo (and thus docsy) handles images. From the source images, Hugo automatically creates a set of images for different screen sizes, and automatically loads the one closest to the current screen size.

…

On Tue, 19 Jul 2022, 18:25 Derek Young, ***@***.***> wrote: Hello -- I'm loving Docsy, but I've noticed that on my site <https://openforestobservatory.org/>, as well as the Docsy site and the Goldydocs demo site, the background image (featured-background.jpg) for the landing page gets blurry when I reduce the window size. For example, here's a closeup of the Docsy background image when my browser window is at full width: [image: image] <https://user-images.githubusercontent.com/22568494/179796813-fb541a5f-92fd-4e8b-b5eb-c039d5800521.png> And here's an example with browser window at 75% of my screen's width: [image: image] <https://user-images.githubusercontent.com/22568494/179798946-b6389a31-4546-4b54-89f6-de11c96bac95.png> There is a sudden transition from crisp to blurry right at this transition in window width, even though the image does not appear to be getting scaled. On mobile devices (smaller screens), the image is always in its blurry form. I did a bit of searching on CSS image scaling etc (e.g. here <https://stackoverflow.com/questions/42529379/css-background-image-is-rendered-blurred-and-not-entirely> and here <https://stackoverflow.com/questions/18677983/how-to-prevent-the-background-image-from-getting-blurry>) but nothing worked. Any thoughts on how to prevent this? Thanks in advance! — Reply to this email directly, view it on GitHub <#1109>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6AU3PEF5LNP725THBJ3ZTVU3JHBANCNFSM54ASXWJA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[jmichelgarcia]

Check your image processing options https://gohugo.io/content-management/image-processing/#processing-options