Center a Background Image at 50% of its Original Width and Height

Question

Solution

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
      background: image-url('map@2x.jpg');
      background-size: $lowDPIImageWidth $lowDPIImageHeight;
      background-position: center center; // Note that I had to reapply background-position again
} 

Question

I have a div with a background-image:

background: image-url('map.jpg');
background-position: center center;
background-repeat: no-repeat;

When I resize the div, I can be certain that the center of the background image is located in the center of the div, and that the image will not scale. It is effectively cropped by the div.

I am using a media query to swap out this image for one of double dimensions if the client's screen is hdpi.

The problem is that rather than taking up the same area as the original image with double resolution, the image expands to its full dimensions, so it effectively doubles in size. This makes sense as it is double the size.

How can I have the image display at the same dimensions as the original image whilst remaining centered?

It appears that setting background-size to 50%:

background-size: 50% auto;

Does not achieve what I'm after.

Answer 1

Have you tried specifying the exact pixels? Setting it to 50% will set it to 50% of the div's width. If you already know the exact dimensions of the image, but you want to scale it by 50%, then just set the background-size to half the width/height in pixels.