[Responsive layout] What pixels does background-size (logical / device) use?

Question

css

By boolean, I mean that when you go to screens, they will be scaled by the pixel-ratio value.
Those. Let's say I have a device with pixel-ratio = 2 and an element with width = 100px, height = 100px with an image on a 100x100 background. If I'm not mistaken, the image should take up a quarter of the element (1/2 width, 1/2 height).
But what size will the displayed image be on this device with background-size = 100px? I see 2 options:
1. Nothing will change. Those. background-size defines the size in pixels of the image (aka device pixels).
2. The picture will fill the entire square of the element. Those. background-size specifies the size in logical pixels (the ones that set the width and height).

Answer 1

If I'm not mistaken, the image should take up a quarter of the element (1/2 width, 1/2 height).

You are wrong. The whole element will take. Everything in the browser operates on logical pixels.
It's logical. Why do you think some styles should operate with logical pixels, and some with "real" ones?
Therefore, option 2.

Answer 2

I think option 3 is correct - make a primitive page on jsfiddle and open from mobile

Answer 3

What's stopping you from trying it in developer tools? (F12, device mode)