Different Image on Mobile Web than Desktop Web

[DavidG_TL]

Hello,

I wanted to allow for different images on mobile web than desktop web view and also remove the white space under the image.

How can i do this? 🙂

I've already tried the 2019 version by Ninthony but this version doesnt work anymore 😞

Im using the Free Dawn theme.

Thanks in advance! David

[collinsmbaka]

Hi  @DavidG_TL 

You can do this using the CSS background-image property. You can set different background images for different viewports.
For example;

For desktop

@media and (min-width: 768px){ 
selector {
background-image: url("enter image url");
}
}

For mobile

@media and (max-width: 769px){ 
selector {
background-image: url("enter image url");
}
}

Cheers!

[DavidG_TL]

Hello,

thank you for this quick answer! 🙂

sadly I don’t really understand it. Could you ma be describe it a bit mir detailed?

cheers!