Change an image for mobile devices in HTML5 (inline)

Bought a template. The author doesn’t reply although it’s supported. So I need to get into this myself.

I want to display a different image on mobile devices but the image is not displayed with CSS but with HTML directly:

(<)div class=“slice-slider-slide-left”>
(<)div class=“slice-align-animation parallax” style=“background-image: url(img/ELEMENTA_Background.jpg);”>(<)/div>
(<)/div>

So how can I change this and add something like “@ media” inside the HTML?

Thanks for your help.

Most probably the author does not provide support because the item is downloaded via Envato Elements, which has a different support policy than Envato Market: https://help.elements.envato.com/hc/en-us/articles/360000629166-Item-Support-on-Envato-Elements


Although, here is the solution, is quite easy:

Step1: In the HTML file (the file index8.html from your template), just go to the first occurrence of “slice-align-animation parallax”.

Step2: Replace this:

<div class="slice-align-animation parallax" style="background-image: url(img/background-25.jpg);">

with this:

<div class="slice-align-animation parallax" id="slide1">

(I removed the inline style background and added an id instead)

Step3: Now go to the head section of the html and add the media queries:

 <style type="text/css">
        /* The templates' background for desktop */
        #slide1 {
            background-image: url(img/background-25.jpg);
          }
        /* On screens < 992px, set another background, new1.png, rename with your own */
        @media screen and (max-width: 992px) {
          #slide1 {
            background-image: url(img/new1.png);
          }
        }

  </style>

Step4: Then repeat steps 1-3 for each slide background, naming them slide1, slide2, slide3, etc

2 Likes

Good morning and thank you very much Hevada.

I am aware that Envato Elements doesn’t include support, but I didn’t know that until another author told me that. I guess you cannot expect all clients to read all help topics :wink: I’d recommend to at least place a hint on the download page on Envato Elements that - although it takes a monthly fee to download stuff there - the items are not supported. However in this case I also purchased the template on Themeforest…

However, I really appreciate it that you sent this solution :slight_smile: I will give it a try right away and again - thank you very much.

Cheers