Fixed cover hero

Table of Contents

Description
Implementation

Description #

There’s an issue on image backgrounds that are set to fixed, where as soon as you change the image from default (scroll) to fixed, the image zooms way in and no longer appears to respect the “cover” background property.

This is not a bug from Elementor, it’s the normal behavior, and this answer from Stack Overflow explains it better.

We built a workaround that makes the fixed background to keep the expected look even when using cover as background image. This is a simple solution with two important limitations:

It will work for only 1 section per page.
The section needs to be the first section on the page.

* We could improve this solution in the future to remove these limitations if needed.

Implementation #

You just need to add the CSS class .fixed-cover-hero to the Elementor section that has the fixed background with cover size. This is done in the Advanced tab.

After that, add the following CSS and JS to your theme:

				
					/**
 * Fixed Cover Hero
 */
jQuery( document ).ready( function( $ ) {
	$( '.fixed-cover-hero' ).each( function() {
		$( this ).prepend( '<div class="fixed-cover-hero-bg"></div>' );
		let $bg = $( this ).find( '.fixed-cover-hero-bg' );
		$bg.css( 'background-image', $( this ).css( 'background-image' ) );
		$bg.css( 'background-position', $( this ).css( 'background-position' ) );
		$bg.css( 'top', $( this ).offset().top );
		$bg.css( 'height', $( this ).height() );
		
		$( this ).addClass( 'fixed-cover-hero-init' );
		
		$( this ).siblings( '.elementor-section' ).addClass( 'fixed-cover-hero-sibling' );
	} );

	$( window ).on( 'resize', function() {
		$( '.fixed-cover-hero' ).each( function() {
			let $bg = $( this ).find( '.fixed-cover-hero-bg' );
			$bg.css( 'top', $( this ).offset().top );
			$bg.css( 'height', $( this ).height() );
		} );
	});
} );

				
					/**
 * Fixed Cover Hero
 */
.fixed-cover-hero-init{
	z-index: -1;
	background: none !important;
}
.fixed-cover-hero-bg{
	z-index: -1;
	position: fixed;
	right: 0;
	left: 0;
	background-size: cover;
}
.fixed-cover-hero-sibling{
	z-index: 2;
	background-color: #fff;
}