html - Background attachment fixed to the wrapper div -
i have such 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 can see in fiddle fixed background image positioned window not wrapper. image positioned @ start of "content-middle" div, expected. using solution background-size:cover not working me, shall avoid of image stretching. grateful stacked on , can't find working solution. in advance!enter code here
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/
Comments
Post a Comment