<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div> <div class="ha-bg-parallax text-center block-marginb-none" data-type="background" data-speed="20"> <div class="ha-parallax-body"> <div class="ha-content ha-content-whitecolor"> "Our main goal is to build a pixel perfect, one page parallax template with unlimited possibilities applicable for different businesses." </div> <div class="ha-parallax-divider-wrapper"> <span class="ha-diamond-divider-md img-responsive"></span> </div> <div class="ha-heading-parallax">Spargo Team</div> </div> </div> </div> </div>

.ha-bg-parallax { background: url(http://thememove.com/shoot/white/assets/img/sample/1920x650/3.jpg) 50% -195px no-repeat fixed; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; height: 300px; margin: 0 auto; width: 100%; display: table; vertical-align: middle; } .ha-bg-parallax .ha-parallax-body { display: table-cell; vertical-align: middle; } .ha-bg-parallax .ha-content-whitecolor { font-size: 17px; color: #ffffff; width: 45%; margin: auto; } .ha-bg-parallax .ha-diamond-divider-md { margin: 15px 0px; } .ha-bg-parallax .ha-heading-parallax { font-style: italic; font-weight: bold; text-transform: none; color: #ffffff; padding-bottom: 0px; } div.clear { clear: both; } div.product-chooser{ } div.product-chooser.disabled div.product-chooser-item { zoom: 1; filter: alpha(opacity=60); opacity: 0.6; cursor: default; } div.product-chooser div.product-chooser-item{ padding: 11px; border-radius: 6px; cursor: pointer; position: relative; border: 1px solid #efefef; margin-bottom: 10px; margin-left: 10px; margin-right: 10x; } div.product-chooser div.product-chooser-item.selected{ border: 4px solid #428bca; background: #efefef; padding: 8px; filter: alpha(opacity=100); opacity: 1; } div.product-chooser div.product-chooser-item img{ padding: 0; } div.product-chooser div.product-chooser-item span.title{ display: block; margin: 10px 0 5px 0; font-weight: bold; font-size: 12px; } div.product-chooser div.product-chooser-item span.description{ font-size: 12px; } div.product-chooser div.product-chooser-item input{ position: absolute; left: 0; top: 0; visibility:hidden; }

$(function () { "use strict"; var $bgobj = $(".ha-bg-parallax"); // assigning the object $(window).on("scroll", function () { var yPos = -($(window).scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '100% ' + yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); $('div.product-chooser').not('.disabled').find('div.product-chooser-item').on('click', function(){ $(this).parent().parent().find('div.product-chooser-item').removeClass('selected'); $(this).addClass('selected'); $(this).find('input[type="radio"]').prop("checked", true); }); });