Different header image for mobile displays (css needed)

hello,

I want to display different header image (from my media library) on mobile displays.
I’ve tried to use this css, but nothing changes. Any suggestions how to make it happen?

css I used: @media only screen and (max-width: 480px) { .header-image { background-image: url(http://www.mywebsite.com/wp-content/uploads/2017/06/my-mobile-cover.jpg); } }

Hi,

Please try these CSS code instead:

@media only screen and (max-width: 480px){
  .header-inner {
    display: none;
  }
  .header-image {
    background-image: url(YOUR IMAGE URL);
  }
}

Regards,
Awan

hello Awan,

thanks for reply, but the code does nothing. you can check my website www.photoambi.com

:frowning:

link to image: http://www.photoambi.com/wp-content/uploads/2017/06/cover-v3.jpg

Hi,

I’ve checked your site and looks like you already resolved the issue?
I noticed that you are using these CSS code below, which is its working:

@media (max-width: 640px){
  .sydney-hero-area::before {
    ....
    background-image: url(http://www.photoambi.com/wp-content/uploads/2017/06/cover-v3.jpg);

    ....
  }
}

Regards,
Awan

Hi,

yes, I’ve used this code:

@media (max-width: 640px) {
    .sydney-hero-area .header-image {
        display: none;
    }

    .sydney-hero-area::before {
        content: '';
        background-image: url('http://www.photoambi.com/wp-content/uploads/2017/06/cover-v3.jpg');
        width: 320px;
        height: 503px;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        margin-left: auto;
        margin-right: auto;
    }
}

and now it works.
One more question: is there a code string I can apply to this code, to make it work on mobile display only if it is in “portrait” mode and not “landscape” ?

found the answer :slight_smile: added “and (orientation: portrait)” to the code and it works :slight_smile:

Awesome! you solved the issue by your self :slight_smile: