Image Gets Blurry When Resizing Browser


Well, my problem is the title exactly. When I resize the browser, the image gets huge and blurry, which is very annoying. I am using Images as background images behind the header and footer. When resizing the images just get huge and extremely blurry.


The background-size: cover property forces the background image to be as large as it needs to be to cover the element it’s on. If you make the element larger than the image, you can expect this sort of result. I’m not sure what your question is.


How do I make it to where the image does not get blurry like this but the width would take up 100% of the screen?


Use an image with a higher resolution.

Since the image in question is a set of vertical bands, you might be able to make it tile without looking any worse.