Consider including the css property transform: scale(0.5);.
To ensure compatibility across devices, remember to add browser prefixes to the transform property. You can learn more about browser compatibility of the transform property here.
For detailed information on the transform css property, visit this link.
If you want to know more about the scale function, check out this page.
UPDATE:
In order to eliminate white space around a scaled image, set the origin of the transform to align it properly.
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
transform-origin:left top;
This will position the scaled image at the left top corner of the box. If transforming an element causes other elements to shift, consider wrapping the transformed element in a div and resizing it as needed to re-render surrounding elements.
For more guidance on handling this issue, read through this relevant stack-overflow article.
SNIPPET
#bg-image{
background-image: url(https://preview.ibb.co/kEf8bQ/rhyms1.jpg);
background-position: 0px 0px;
background-size: 1000px;
border: 1px solid red;
width: 500px;
height: 281px;
float: left;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
transform-origin:left top;
}
<div id="bg-image"></div>
UPDATE-2
To accomplish your goal
VIEW THIS JS-FIDDLE FOR A DEMONSTRATION.
https://jsfiddle.net/nmgcq52s/7/