How can I display different images on desktop and mobile for my website?

Store Design
1

Hello everyone,

For my website i want to use a different picture on desktop than mobile. I saw some other discussions here with the code but after i applied the code i saw one brick with the picture for desktop and the second brick (where the picture for mobile was) stayed blank. Can anyone help me with this, i use the theme origin.

Kind regards

2

Hi,

Identify the CSS class or ID of the element where you want to change the background image.

After that need to Add Custom CSS at theme.scss.liquid or styles.scss.liquid file

/* Desktop */
@media only screen and (min-width: 769px) {
  .custom-section {
    background-image: url('URL_TO_YOUR_DESKTOP_IMAGE');
  }
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .custom-section {
    background-image: url('URL_TO_YOUR_MOBILE_IMAGE');
  }
}
3

Is there also a possibility where i don’t need to use a URL for the banner?

4

For this you have to edit your current banner code which will let you upload the mobile version of banner.

Let me know if interested.