Alternate header image

  • Author
  • #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?


    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.

    Cryout Creations mastermind

    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
    Please check the available documentation and search the forums before starting a topic.

    Thanks! Will take a look.

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

The topic ‘Alternate header image’ is closed to new replies.