Full screen header image in mobile device


#1

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


#2

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


#3

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


#4

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


#5

Hi there,

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

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


#6

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


#7

Hi,

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

Thanks!


#8

Hello there,

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

Regards,
Kharis


#9

Redrockheadwear.com

Thanks!


#10

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


#11

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


#12

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