How to change header image for mobile devices

  • I want to make a different header image show when being viewed on a mobile device. Im still kinda new to wordpress and would appreciate any help or sample code if possible. Thank you in advance.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    If you want to change the header image on the mobile view for each page, please add this custom CSS code in Appearance -> Customize -> Additional CSS

    @media (max-width: 767px) {
  .page-id-21 .page-header.page--cover {
    background-image: url('your-image-url') !important;
  }
}

    You can get the page id when editing the page, see my screenshot https://share.getcloudapp.com/RBuq9gLz.

    Regards.

    Thread Starter recoil9

    (@recoil9)

    Hi Long,
    Thank you for your help. Please clarify for me as it isnt working.
    I added your code, edited to show the path to my image, and went to check for my page id. It doesnt show page id it shows “post=”, and i just found out the number to right is the page-id. In my case its “2”. Still nothing.
    Thank you again for your patience and help.

    Heres the code I added to css:

    @media (max-width: 767px) {
    .page-id-2 .page-header.page–cover {
    background-image: url(‘https://www.semglobalmedia.com/images/sem-logo.jpg’) !important;
    }
    }

    • This reply was modified 4 years, 5 months ago by recoil9.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change header image for mobile devices’ is closed to new replies.