Add Mobile Background Image Uploader (manhead)

Watch video for placement.

[video width="1210" height="720" mp4="http://wiki.onelivemedia.com/wp-content/uploads/2020/02/Screen-Shot-.mp4"][/video]   Open settings_schema.json and under the site-background-image-file picker add the following code:

      {
        "type": "paragraph",
        "content": "Site background Mobile image"
      },
      {
        "type": "checkbox",
        "id": "site-background-mobile-image",
        "label": "Yes"
      },
      {
        "type": "image",
        "id": "site-background-mobile-image-file.jpg",
        "label": "Site background Mobile image file"
      },

open custom.scss.liquid and at the bottom  of the file add the following code:

@media (max-width: 991px) {
  {% if settings.site-background-mobile-image %}
    body {
      background: none;
    }
    body:before {
      content: "";
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -10;
      background: url("{{ 'site-background-mobile-image-file.jpg' | asset_url }}") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
  {% endif %}
}