html - 固定到包装器 div 的背景附件

Question

我有这样的情况: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;
}

正如您在 fiddle 中看到的那样，固定背景图像定位到窗口而不是包装器。正如预期的那样，我希望图像位于“content-middle”div 的开头。使用任何带有 background-size:cover 的解决方案都不适合我，因为我将避免图像拉伸(stretch)。非常感谢您的帮助，因为我一直在努力解决这个问题，但找不到可行的解决方案。提前致谢!在此输入代码

Answer 1

试试 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 演示 http://jsfiddle.net/5axmtw9g/9/