Full screen header image in mobile device

Hi athemes team, please how I can obtain a full screen of the header image in mobile devices ? Thank you in advance. Regards, Nassim

Hello there,

To achieve such that objective, could you please try doing the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {
 
  if ( matchMedia( 'only screen and (max-width: 600px)' ).matches ) {

    var headerImg = $('.header-image .small-header').attr('src');

    $('.header-image').css({
      'background-image' : 'url("'+headerImg+'")',
      'background-repeat' : 'no-repeat',
      'background-size' : 'cover' 
    });
    
  }

});

  1. Update
  2. Apply the below custom CSS code into Additional CSS option

@media only screen and (max-width:600px){
  
  .header-image img{
    opacity: 0;
  }  
  
  .header-image{
    height: calc(100vh - 120px);
    height: -moz-calc(100vh - 120px);
    height: -webkit-calc(100vh - 120px);
  }
  
}

Regards,
Kharis

It’s works perfectly !! Thank you very much :slight_smile: FYI, I put your team and your company into the legal terms of my web site :wink: Thanks again. Kind regards, Nassim

Hello there,

Glad to hear that! You’re very kind. :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi there,

I did the steps as you advised above, but failed.

The full screen of header image still can’t shown on mobile.

Hello there,

Is site caching enabled? Have you managed to clear it? Please refer to this codex.

Please share the link to your site, so I can have a look.

Regards,
Kharis

Hi,

When I do this it displays the left portion of my header image. How do I get it to display the center?

Thanks!

Hello there,

Share a link to your site, please. So I can have a look.

Regards,
Kharis

Redrockheadwear.com

Thanks!

Hello there,

Thank you for sharing.

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.header-image').length ) {
        var headerImg = $('.header-image').find('.large-header').attr('src');

        $('.header-image').css({
          'background-size': 'cover',
          'background-repeat': 'no-repeat',
          'background-position': 'center center',
          'background-image': 'url('+headerImg+')',
          'overflow': 'hidden',
        }).addClass('apply-bg-image');

        var wHeight = $(window).height();
        var headerHeight = $('.site-header').height();
        var heroHeightMobile = wHeight-headerHeight;

        $('.header-image').height(wHeight);

        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
            $('.header-image').height(heroHeightMobile);
        }

      }

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (max-width: 1024px) {
      .header-image img.large-header,
      .header-image img.small-header {
        opacity: 0;
      }
    }

Regards,
Kharis

Works perfect! You’re a great help. What would I add to this to make it apply only to the homepage?

Hello there,

Try this code:

    (function($){

      if( $('.home .header-image').length ) {
        var headerImg = $('.header-image').find('.large-header').attr('src');

        $('.header-image').css({
          'background-size': 'cover',
          'background-repeat': 'no-repeat',
          'background-position': 'center center',
          'background-image': 'url('+headerImg+')',
          'overflow': 'hidden',
        }).addClass('apply-bg-image');

        var wHeight = $(window).height();
        var headerHeight = $('.site-header').height();
        var heroHeightMobile = wHeight-headerHeight;

        $('.header-image').height(wHeight);

        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
            $('.header-image').height(heroHeightMobile);
        }

      }

    })(jQuery);

Regards,
Kharis