Hello, there,
I see your point!
Well you have come across a difficult case. What you are trying to do with background-size: cover; is to stretch the image to cover the area of its container in both width and height and at the same time keep its aspect ratio. However, the image has a landscape orientation, so in small screens the height prevails and the image is stretched while it is already downsized quite a bit. Hence the pixelated effect.
I know this might sound a bit complicated, but it is a weird combination of factors.
Now, you cannot actually “fix” this problem. It is the equivalent of having a small image stretch to cover a big container. It will never look very good! What you could do is:
1. Put another image in the background there, one that has some different orientation. Of course this might affect the way that section renders in big screens. I know, not very nice!
2. Change the breakpoint that the plugin uses in its settings. It seems that your lowest breakpoint now is 480. If you raise that then bigger images will be produced, but they will look better. Unfortunately this will affect all images that the plugin creates and not just the one we are talking about.
3. If you have access to that section’s HTML code, you could add this url parameter ?debug=original to the source of the image, which bypasses our plugin like this https://vrdev.e-ms.co/wp-content/uploads/2016/11/audit-bg.jpg?debug=original.
Let me know how it goes and if I can help you any further.
Cheers,
Takis
