0

I'm trying to make a Login System using Python flask and MySQL. I tried styling the html templates using CSS and I made it look good but the background image is blurry for some reason. I tried doing "image-rendering:" but it didn't work. Is there any fix to this?

Code:



body{
    margin: 0;
    padding: 0;
    background: url('/static/background2.jpg');
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}

This is how the background image looks.

Strawberry
  • 33,750
  • 13
  • 40
  • 57
Fat Trat
  • 65
  • 1
  • 10
  • If you open your background image in a browser tab. Does it look blurry there. How is its resolution? – ex4 Mar 10 '21 at 17:41

3 Answers3

0

Try checking the resolution of the picture. It seems like your picture is of low resolution and that is why it is blur when you try to expand it. If your resolution is ok try writing background-size:100%; instead of background-size: cover;............ I hope this works :)

Sabeeh Khan
  • 1
  • 1
0

The original image may have a large size, and when you combine it into the website background, it zooms in, which causes the blurry image.

Ericsson
  • 27
  • 1
  • 10
  • It's 1920x1080? What do I do? – Fat Trat Mar 11 '21 at 05:21
  • Here are some links that I believe can help you https://stackoverflow.com/questions/18677983/how-to-prevent-the-background-image-from-getting-blurry https://stackoverflow.com/questions/42529379/css-background-image-is-rendered-blurred-and-not-entirely/42529554 – Ericsson Mar 11 '21 at 14:17
  • Unfortunately I already have tried those and none of it worked. – Fat Trat Mar 11 '21 at 15:29
  • Here are a few links that i found https://stackoverflow.com/questions/29599794/how-to-sharpen-an-image-in-css. https://www.sitepoint.com/community/t/clear-image/27027/2. https://www.javatpoint.com/how-to-change-image-size-in-html – Ericsson Mar 11 '21 at 17:11
-1

It is probably the image that is low quality. Try another image!

Luca Janss
  • 81
  • 10