Background attachment fixed to the wrapper div

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

You do understand that fixed is always to the window? "Fixed":The element is positioned relative to the browser window. — Jan_dh, Aug 05 '15 at 11:56
you like this http://jsfiddle.net/rohitmalikazad/5axmtw9g/4/ — Rohit Azad Malik, Aug 05 '15 at 11:56
cover is not a solution for me, as you see the minion face is not seen entirely, anyway even with the cover property background is fixed to the window not to the container. Actually any alternative solution without background-attachment: fixed, but with the same visual effect works for me — Naira2596823, Aug 05 '15 at 12:52

score 1 · Answer 1 · answered Aug 05 '15 at 13:39

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/

answered Aug 05 '15 at 13:39

Julia

1,301
1
14
29

seems that its not possible only with css – Naira2596823 Aug 06 '15 at 08:05

score 0 · Answer 2 · answered Aug 05 '15 at 11:59

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

background image is now not fixed, it scrolls – Naira2596823 Aug 05 '15 at 12:09 — Naira2596823, Aug 05 '15 at 12:09

score 0 · Answer 3 · answered Oct 20 '17 at 16:17

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

Background attachment fixed to the wrapper div

3 Answers3