How to stop background-position making the background image less sharp?

Question

I have a 1920x1080 JPEG background image that I am using on a 1920x1080 screen.

It has the following properties:

background-image: url(/bg.jpg);
background-attachment: fixed;
background-position: center top;
background-repeat: repeat;

In Chrome, without the background-position: center top; the background is perfectly scaled and sharp. With this property added, the background loses sharpness.

Weirdly, if the browser width is an odd number, the image is perfectly sharp. So 1920x1080 would be a bit blurry, but 1919x1080 would be perfect.

In Edge and Firefox, the background image is perfectly scaled in either case.

The background-position property is required for proper positioning due to scroll bars on some browsers.

I have tried image-rendering. The only property that I could actually see a difference with was pixelate, but it caused tearing at some parts.

I have trialed lots of different property combinations (background-size), but I definitely could've missed something.

My question is the title:

How to stop background-position making the background image less sharp?

But the answer to this question would also resolve my problem, as I think that this might be a bug or at least an after-effect/result of one of Chrome's features:

How to stop Chrome resizing (or doing something else) to a background image when it is being positioned?

Answer 1

There could be multiple reasons why this is happening.

I'd take a guess and say that the background-size isn't being set. I would be tempted the have this set to background-size: contain to keep your ratio in tack. Also when you are using background-attachment: fixed; make sure the div is position: static.

Hope this help, if not, supply a jsfiddle and I can take a look.