1. First, upload your background image. To do this, go to Themes > Template Editor > Assets > Add a new asset. For this tutorial, we are going to upload a background image called “background-image.jpg“.
2. Now we are going to create a class for this background image. Go into Template Editor > Assets > theme.scss.liquid. Add following code at the end of file:
body.background-class { background-image: url({{'background-image.jpg' | asset_url }});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}Be sure that the filename of the background image you uploaded appears in between the single quotes.
Note: The code above will stretch background images to the fit the size of the browser. If your background image is repeating, or you don’t want it to be stretched, you can adjust the code. See this page for assistance.
3. Finally, you’ll want to tell the theme to load this background image specifically for this page. Go back to Themes > Template Editor > Layouts > Theme.liquid. Look for the following code:
<body class=".....">
You’ll need to add the code like following:
<body class="..... {% if page.handle == 'about' %}background-class{% endif %} ">
