How to center the left edge of background image using css - css

Question

I've been given a design that I'm having a lot of trouble building as a responsive site.
I'd like the image to extend to the edge of the browser window, so I've placed it as a background image in the fluid container, with a spacer image. The problem is that once we go mobile, the background image will appear beneath the copy above.
I've tried several other versions of this layout, and nothing works. Hoping someone has a suggestion.
Here's a rough markup.
.test {
background-image: url(http://placehold.it/1600x500 );
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid test">
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: blue;">left col</div>
<div class="col-md-6"><img src="http://placehold.it/20x500/b0b0b0" alt="spacer"></div>
</div>
</div>
</div>

Answer 1

one way to achieve the responsive effect is to change the background-size accordingly to match the new visualization. That way you can alter from 50% 100% for the desktop version where it's right aligned and to 100% 50% on the mobile version where it fills half the height of the component.
As an example I've created this jsFiddle demo, that goes like this:
The html is pretty much the same:
<div class="container bg-pink">
<div class="row half-bg">
<div class="col-sm-6">
<p class="text-right">
<b>bold text first with some nuances</b> then some normal text to break the line. then some normal text to break the line. then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.
</p>
</div>
<div class="col-sm-6 no-gutter">
<div class="half-holder">
</div>
</div>
</div>
</div>
The CSS (important bits) we define:
/* Image */
.half-holder {
height: 100px;
}
/* Normal */
.half-bg {
background: url('https://maxwelldemon.files.wordpress.com/2012/03/2x1-triangle.png') no-repeat right bottom;
background-size: 50% 100%;
}
/* The media query for responsive */
#media (max-width: 768px) {
.half-bg {
background-size: 100% 50%;
}
}
Hope it helps!