Trying to fit the contents of a div (including an image, search bar, and three buttons stacked on top of each other) into another div with CSS styling that hides overflow has been a challenge. The CSS code for the div in question is:
.jumbotron {
overflow: hidden;
display: block;
padding: 0;
margin-bottom: 0;
background: #000000 url('../landing_background.jpg') no-repeat center center fixed;
background-size: cover;
position:relative;
}
One possible solution using JavaScript:
Parallax.prototype.translateBgImage = function() {
var scrollPos = $(window).scrollTop();
var pagecoverHeight = this.$element.height();
if (this.$element.attr('data-pages-bg-image')) {
var relativePos = this.$element.offset().top - scrollPos;
// if element is visible in window
if (relativePos > -pagecoverHeight && relativePos <= $(window).height()) {
var displacePerc = 100 - ($(window).height() - relativePos) / ($(window).height() + pagecoverHeight) * 100;
this.$element.css({
'background-position': 'center ' + displacePerc + '%'
});
}
}
}