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>

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:

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);


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


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.