Position background image in the right half of the screen - html

Question

I am trying to position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.

Answer 1

Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/

Answer 2

Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>