Background attachment fixed to the wrapper div - html

Question

I have a such a situation: http://jsfiddle.net/5axmtw9g/3/
<div class="content inner clearfix1 has-left-sidebar">
<div class="sidebar-left-menu prepended"></div>
<div class="content-middle">
<section id="about-stat" class="clearfix1 about-stat-section">
<h1>Some title</h1>
</section>
</div>
</div>
.inner {
margin: 0 auto;
width: 600px;
}
.content.inner {
position: relative;
}
.content .sidebar-left-menu {
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
float: left;
width: 160px;
}
.sidebar-left-menu {
background: #3b86c4 none repeat scroll 0 0;
color: #fff;
}
.content-middle {
margin: 0 0 10px 170px;
}
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat fixed 0 0;
height: 590px;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
}
As you can see in the fiddle the fixed background image is positioned to the window not to the wrapper. I would like the image to be positioned at the start of "content-middle" div, as expected. Using any solution with background-size:cover is not working for me, as I shall avoid of image stretching.
Would be really grateful for help as I stacked on this and can't find a working solution.
Thanks in advance!enter code here

Answer 1

Try jquery
posBg();
$(window).resize(function() {
posBg();
})
function posBg(){
var posLeft=$('#about-stat').offset().left;
var posTop=$('#about-stat').offset().top;
$('#about-stat').css("background-position", posLeft+"px "+posTop+"px");
}
Fiddle demo http://jsfiddle.net/5axmtw9g/9/

Answer 2

I think you can achieve what you want by adjusting your background to the following:
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat center top ;
background-size: 100% auto;
The center-top will position the background to the right place. the size will display it at 100% width without adjusting the aspect-ratio. Now you just have to go for a bigger height div to show it full size (or a different background-image).
Demo

Answer 3

Background image X AXIS is 50% plus half the width of it's sibling container
https://codepen.io/AliKlein/pen/dVrmVO
section {
height: 100vh;
background-image:
url(https://source.unsplash.com/collection/194676/3);
background-size: cover;
background-attachment: fixed;
background-position-y: center;
background-position-x: calc(50% + 12.5vw);
}