Why is my background have a blur effect in some areas?

[CodeingMAN]

I have a background dit is supposed to look like this.

but it looks like this when I inset it.

You see that thing that is around the words How Do I fix this?

body {
     color: #666666;
     line-height: 1.80857;
     font-weight: normal;
     margin: none;
	background-position: center center;
	background-repeat: no-repeat;             
	background-attachment: fixed;
	background-size: cover;
background-image: url("images/Background.PNG");
}

[dlaub3]

@CodeingMAN

You see that thing that is around the words How Do I fix this?

I’m not sure what you mean by that. Can you explain the problem another way?

[wannacode]

I don’t get it either, but raster images will always have some slight blurring.

[Madan]

Hello,

Try by giving the value of width and height at 100%.

[CodeingMAN]

Basically, the quality is supposed to be 1080P (HD) but when I added it to my background around the text there is a blur effect and the image quality looks 480P now.

[CodeingMAN]

and it still looks like before.

[lasjorg]

It just looks like compression or scaling artifacts.

Get the original image, keep it as a JPEG. Do not convert it to PNG. I saw one article that credited the image to gettyimages but their search sucks and I can’t be bothered to look for the original.

This version I found looks pretty clean (I would suggest you do not hotlink from medium). Also, using it at that size and resolution will slow your page load.

https://miro.medium.com/max/9600/1*NUsPxkh-sSS_E9XTp7Fckg.jpeg

Look at the image without any scaling, now add the background-size: cover and see if/when it starts to cause scaling artifacts. In the case of the image I linked to, it really shouldn’t happen.

[CodeingMAN]

because I want a dark background can you suggest any 4k coding dark images? or at least 1080p HD. background-color: black; looks to plan

(I did not compress)

[lasjorg]

Using a single non-repeating image to cover all of the body is going to get problematic quickly as the page grows in height from the content. It wouldn’t really work unless the page is never going to get much content.

Also, using a huge image as a background is just a recipe for slow page loads.

You might look into using a repeating pattern instead just to give the page some texture. You can also do an in-browser color overlay on the image to darken or otherwise change it to be less noticeable (desaturate, blur, etc).

[CodeingMAN]

can you blur the entire background since you just mentioned that it is a recipe for slow-loading webpages? Now I kind of want to blur the image for more fast loading speeds .

[lasjorg]

Blurring the image in the browser (i.e. using a filter) will not make it load faster.

Blurring an image in an image editor will, simply by reducing the complexity. Even a small blur will reduce the sharpness enough to cause the image to compress better. A large blur might drastically reduce the total cost.

It will depend on the image as different images do not compress equally.