Skip to content

Instantly share code, notes, and snippets.

@jillmugge
Created March 10, 2016 14:24
Show Gist options
  • Save jillmugge/860e3bbeb1f15e472209 to your computer and use it in GitHub Desktop.
Save jillmugge/860e3bbeb1f15e472209 to your computer and use it in GitHub Desktop.
fixed position doesn't work well with bg-size cover in css. this is an alternative using jQ
.hero-image {
background: url('http://dev.jmgmarketinggroup.com/arete/wp-content/uploads/Hero-v5.jpg') no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
min-height:700px;
/*min-width:100%;*/
background-attachment:scroll;
background-position: bottom right;
}
jQuery(function( $ ){
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.hero-image').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
});
<div class="hero-image">
<div class="header"> <a href="<?php echo home_url(); ?>" title="Home" alt="Logo"><img class="logo" src="<?php echo home_url(); ?>/wp-content/uploads/Arete-Logo.png" alt="Home" /></a>
<?php wp_nav_menu( array( 'menu' => 'top menu', 'menu_class' => 'builder-module-navigation') ); ?>
</div>
<div class="hero-text">
<h1 class="text-center white shadow" style="clear:both;">Welcome to Arete Homes Colorado</h1>
<h2 class="text-center white shadow">Providing exceptional home value for over two decades</h2>
[custom-button url="" title="Request Information" class="orange-button-sm-shadow block-center popmake-46" icon="" ]
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment