Skip to content

Instantly share code, notes, and snippets.

@maxxcrawford
Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxxcrawford/fc2b99710bc49c812a18 to your computer and use it in GitHub Desktop.
Save maxxcrawford/fc2b99710bc49c812a18 to your computer and use it in GitHub Desktop.
Fixed Position / Cover Image Fix (Src: http://goo.gl/0wkXIk)
<div id="wrapper">
<div id="container"></div>
<p>Scroll Down</p>
</div>
<div id="content">
</div>
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
#wrapper {
background: #bada55;
width:100%;
height: 400px;
}
#container {
background-image:url("http://farm3.staticflickr.com/2533/4062253262_90a3635234_o.jpg");
background-attachment:scroll;
background position:left top;
background-size:cover;
width:100%;
height:300px;
}
#content {
height:2000px;
}
p {
line-height:1.5;
font-family:sans-serif;
font-size:3.875em;
margin: 0 0 20px;
text-align:center;
color:#fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment