css 固定位置不适用于CSS中的bg大小覆盖。这是使用jQ的替代方案

Posted 2021-05-13

<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>

jQuery(function( $ ){
$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('.hero-image').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
});

.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;
}