Alternate header image

  • Author
    Posts
  • #99041

    Hi – I realise this has been asked a few times for different themes but I can’t get anything to work! I’m trying to specify an alternate header image for mobile screen widths but everything I try in CSS doesn’t seem to work. I also can’t find any plugins which might be suitable. Has anyone achieved this with Mantra or aware of a plugin?

    #99083

    Closest I can get is the rather suspiciously simple:

    @media (max-width: 800px) {
    img#bg_image {
    content: url(“/path/to/my/replacement/image”);
    }
    }

    But this is, I think, just putting the image in front of the existing one. Both are being requested on browser widths at and below 800px when I check in a web inspector.

    #99194
    Zed
    Cryout Creations Team

    You can customize the mantra_title_and_description() function (defined in theme-functions.php) via a child theme to make it output an image srcset for the header image (leaving the browser choose the desired image file based on screen size).


    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
    #99195

    Thanks! Will take a look.

Viewing 4 posts - 1 through 4 (of 4 total)

You need to log in to reply to this topic.