Resize your background images to fit the browser window

The problem of flexible background images is a long-standing challenge for web designers, one that current web technologies are unable to solve in a straightforward way for all browsers.

If you want your background image to stretch automatically to fit the size of your browser window, in all browsers on all devices, no matter what size that window is, you'll need to use JavaScript. Unless you're very experienced, you should consider hiring a Shopify expert to do it for you.

To customize your Shopify Theme to add this functionality for a limited range of browsers, follow this tutorial.

Note

This CSS solution only works in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

The customization involves adding some CSS to your Shopify Theme stylesheet:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click on the Assets folder to view the contents.

  4. Locate and click on the file with a .css.liquid or .scss.liquid extension to open it in the online code editor.

  5. Copy the code below and paste it at the end of the file:

    html, body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    
  6. Save your changes.

Want to discuss this page?

Visit the Shopify Community