Support » Theme: Twenty Seventeen » How to use alternate header image for mobile devices?

  • Common problem… Mobile device background image is zoomed… But can’t make CSS substitute a different image.

    I’ve tried several options found on the forums over the last three hours, but none seem to work.

    I’m using 2017 Theme Version 2.1 and WordPress 5.1. The page works perfectly on a laptop. But on iPad, iPhone, etc, that are in portrait mode, the image is zoomed. I have managed to un-zoom the image, but that leaves a huge space between the image and the menu.

    I created a new portrait image, shaped/cropped to fit iPhone and iPad screens. That image is:

    But nothing I have found will allow me to substitute that image, when viewed on a mobile device. I have tried both changes to “Additional CSS” and “functions.php”, but to no avail. I’m beginning to think it’s time to go back to Dreamweaver and re-design my site from scratch. But I’m just too stubborn to let this thing beat me. So any help will be appreciated.

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

Viewing 1 replies (of 1 total)
  • I think you need to hide the existing header image and apply a background image to the div using CSS. I didn’t test this but something like this. The height you can change to whatever you need, you might also need to specify width of the div. Add this to the CSS file.

    @media only screen and (max-device-width: 489px) {
    img.attachment-twentyseventeen-featured-image {
    display: none; /* hide default image */
    .single-featured-image-header {
    background-image: url(“”) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 240px !important;

    I would avoid dreamweaver, it’s fallen out of favor. WP is great but there is a learning curve for certain things,

Viewing 1 replies (of 1 total)
  • The topic ‘How to use alternate header image for mobile devices?’ is closed to new replies.