Need help with adding custom CSS code to display different images on desktop and mobile

Store Design
, , ,

Topic summary

A store owner needs to show different background images on desktop vs. mobile in a Shopify theme but hasn’t succeeded with prior CSS attempts. Their partial code used a media query for min-width: 768px.

Proposed solution provided:

  • Upload separate desktop and mobile images to the store’s assets.
  • Edit Assets > theme.scss.liquid.
  • Add two media queries: min-width: 768px sets body background-image to the desktop asset; max-width: 767px sets it to the mobile asset.
  • Reference files via Liquid using the asset_url filter (e.g., {{ ‘filename.jpg’ | asset_url }}) and replace with actual filenames.
  • Save and refresh to apply changes.

Key details:

  • Uses CSS media queries to target screen widths (desktop ≥768px, mobile ≤767px).
  • Background is applied to the body element; correct asset paths/filenames are required.

Outcome/status: Guidance and code approach were provided; the original poster has not confirmed success, so the issue remains open.

Summarized with AI on January 30. AI used: gpt-5.
1

Hello Shopify Community,

I am a one-man army trying to customize my Shopify store, and I am currently struggling with adding custom CSS code to display different images on desktop and mobile. Specifically, I want to display a specific image (“shopifybackground-Recovered_a3…b-4eb1-4ced-94b4-376521ffd8ba”) on desktop while having another image displayed on mobile. I have been trying to add the code in the theme editor, but I have not been successful so far. I have also tried different codes suggested by Chat GPT, but none of them seem to work. As someone with no coding experience, I am hoping to get help from the Shopify community to add the correct custom CSS code for this task. Any help or guidance would be greatly appreciated.

See below one of the codes I’ve tried:
@media screen and (min-width: 768px) {
body {
background-image: url('shopifybackground-Recovered_a3…

Thank you in advance for your assistance.

2

Hello there

To display different images on desktop and mobile using custom CSS in your Shopify store, you can use media queries to target specific screen sizes. Here’s an example of how you can achieve this:

  1. Upload your desktop and mobile images to your Shopify store and note the file names or URLs.

  2. In your Shopify theme editor, navigate to the “Assets” folder and open the “theme.scss.liquid” file.

  3. Scroll to the bottom of the file and add the following code:

/* Desktop image */
@media (min-width: 768px) {
  body {
    background-image: url("{{ 'shopifybackground-desktop.jpg' | asset_url }}");
  }
}

/* Mobile image */
@media (max-width: 767px) {
  body {
    background-image: url("{{ 'shopifybackground-mobile.jpg' | asset_url }}");
  }
}

Note that you should replace the file names in the code with the actual file names or URLs of your desktop and mobile images.

  1. Save the changes to the “theme.scss.liquid” file and refresh your website to see the changes.