There are 5 types of background you can set on a section:

  1. Solid Color "color" This can be set using a hex code, rgb or rgba. e.g. "color": "#BF4342"
  2. Liner Gradient "linearGradient" e.g. "linearGradient": "#e66465, #9198e5" (see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
  3. Radial Gradient "radialGradient" e.g. "radialGradient": "#e66465, #9198e5" (see https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient)
  4. Image "imageUrl" e.g. "imageUrl": "[<https://images.unsplash.com/photo-1514477917009-389c76a86b68>](<https://images.unsplash.com/photo-1514477917009-389c76a86b68>)"
  5. Repeating Pattern "patternImageUrl" e.g. "patternImageUrl": "[<https://www.toptal.com/designers/subtlepatterns/patterns/watercolor.png>](<https://www.toptal.com/designers/subtlepatterns/patterns/watercolor.png>)"

Additionally backgrounds can be layered on top of each other to create effects.

"background": {
    "layers": [
      {
        "imageUrl": "<https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1261&q=80>"
      },
      {
        "patternImageUrl": "<https://www.toptal.com/designers/subtlepatterns/patterns/stacked_circles.png>"
      },
      {
        "color": "rgba(255, 0, 0, 0.4)"
      }
    ]
  }
}

Paste this json in the editor (or canvas) to see some cool backgrounds in action:

{
  "name": "Backgrounds",
  "description": "An example site with different types of background"
  "company": "Kiba Labs",
  "sections": [
    {
      "type": "hero-simple-1",
      "titleText": "Solid color",
      "background": {
        "color": "#BF4342"
      }
    },
    {
      "type": "hero-simple-1",
      "titleText": "Linear Gradient",
      "background": {
        "linearGradient": "#e66465, #9198e5"
      }
    },
    {
      "type": "hero-simple-1",
      "titleText": "Radial Gradient",
      "background": {
        "radialGradient": "#e66465, #9198e5"
      }
    },
    {
      "type": "hero-simple-1",
      "titleText": "Image",
      "background": {
        "imageUrl": "<https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1261&q=80>"
      }
    },
    {
      "type": "hero-simple-1",
      "titleText": "Pattern",
      "background": {
        "patternImageUrl": "<https://www.toptal.com/designers/subtlepatterns/patterns/watercolor.png>"
      }
    },
    {
      "type": "hero-simple-1",
      "titleText": "Stacked",
      "background": {
        "layers": [
          {
            "imageUrl": "<https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1261&q=80>"
          },
          {
            "patternImageUrl": "<https://www.toptal.com/designers/subtlepatterns/patterns/stacked_circles.png>"
          },
          {
            "color": "rgba(255, 0, 0, 0.4)"
          }
        ]
      }
    }
  ],
}

Good resources for backgrounds: