FROM CACHE - en_header

Different Image on Mobile Web than Desktop Web

DavidG_TL
Tourist
9 0 3

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

Replies 2 (2)
collinsmbaka
Shopify Partner
222 27 96

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!

Collins Mbaka
Web Developer | Shopify Developer
Hire Me: collinsmbaka.com/contact
DavidG_TL
Tourist
9 0 3

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!