Background position: put left corner in center - css

Question

Hope this image explains more, what I want
(The transparent part of the image should indicate it is bigger than the .content Div :-)
Is there an almost save way (preferably just CSS) to let a background image start at the center?
background-position: center top;
… would use the image's center, not the left corner.
I can't manipulate the image itself (using a transparent offset) nor use absolute values.

Answer 1

You won't be able to do this with a background image on the desired element without using absolute values. See this answer for an illustration of why. In a nutshell, background positioning with percentages and keyword values works much like a sliding puzzle, keeping the image strictly within the element's background positioning area. Only absolute values are exempt from this behavior.
You could cheat by making the image a background of a pseudo-element of the desired element instead, but this requires the desired element to be relatively positioned and act as a containing block for all absolutely positioned descendants, including the pseudo-element:
.content {
position: relative;
height: 200px;
border: 1px solid;
}
.content#one { width: 100px; }
.content#two { width: 200px; }
.content::before {
content: '';
position: absolute;
left: 50%;
width: 50%;
height: 100%;
background: url(http://placehold.it/150x150) no-repeat;
}
<div class="content" id="one"></div>
<div class="content" id="two"></div>

Answer 2

Can be done with pseudo elements
.cimg {
border: 1px solid black;
height: 400px;
position: relative;
}
.cimg::after {
content: "";
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 50%;
background-image: url("http://www.youramazingplaces.com/wp-content/uploads/2014/06/sunset-5.jpg");
background-repeat: no-repeat;
background-size: 400px;
}
<div class="cimg">
</div>