Using CSS to show a different header image on mobile devices

  • Unknown's avatar
    travelstitchersk · Member ·

    I’m using the Gather theme, which simply crops the header image on mobile devices. I’d like to use CSS (I have the premium plan) to have a different image shown when folks aren’t using a desktop device. Ideally I’d have as second image for tablets and a third for phones. Any help would be appreciated.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    gemmacevans · Member ·

    Hi travelstitchersk,

    I’d like to use CSS (I have the premium plan) to have a different image shown when folks aren’t using a desktop device.

    Sure, I’ve written some CSS which should help with this. Paste the following code into My Sites > Customise > CSS, underneath what is already there:

    /* header image on mobile */

@media screen and (max-width: 600px) {
  .site-branding {
    background-image: url(FILE-URL.jpg) !important;
  }
}

/* header image on tablets */

@media screen and (max-width: 768px) {
  .site-branding {
    background-image: url(FILE-URL.jpg);
  }
}

    FILE-URL.jog can be replaced with an image from your Media Library (click Edit on the image) and you’ll want to choose a header image based on the recommended size of 1280px × 180px.

    If you need any further help, you are welcome to reply here or start a new chat :)

  • The topic ‘Using CSS to show a different header image on mobile devices’ is closed to new replies.