背景附件固定到包装器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;
}

可以看到，固定的背景图像定位到窗口而不是包装器。我希望图像被定位在"content-middle"div的开始，如预期的那样。使用任何具有background-size:cover的解决方案对我来说都不起作用，因为我要避免图像拉伸。我真的很感激你的帮助，因为我堆积在这个问题上，找不到一个有效的解决方案。提前感谢!此处输入代码

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");
}

小提琴演示http://jsfiddle.net/5axmtw9g/9/

Answer 2

我认为你可以通过调整你的背景来达到你想要的效果:

  #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;

中央顶部将背景定位到正确的位置。在不调整长宽比的情况下，该尺寸将显示为100%的宽度。现在你只需要去一个更大的高度div显示它的完整尺寸(或不同的背景图像)。

Answer 3

背景图像的X轴是它的兄弟容器宽度的50%加一半

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);
}