Background

Color

The color property can be set to a HEX string or to a IColor | color object, that is the same as the one used in particles.color options.

This color is set to canvas style background-color property, if this property is not set the background will be transparent.

HEX sample

{
  "color": "#bada55"
}

HEX IColor sample

{
  "color": {
    "value": "#bada55"
  }
}

Rgb sample

{
  "color": {
    "value": {
      "r": 255,
      "g": 127,
      "b": 0
    }
  }
}

Hsl sample

{
  "color": {
    "h": 180,
    "s": 100,
    "l": 50
  }
}

The opacity property sets the color property opacity, so you can set a semi-transparent background.

This value is by default to 1 and it accepts any value between 0 and 1 included.

The image property sets the canvas style background-image property.

This property doesn't have a default value, anyway if you need a background image you need to specify the same CSS syntax with the url() function.

{
  "image": "url('https://particles.js.org/images/background3.jpg')"
}

The position property sets the canvas style background-position property.

This link can be useful to set the right value to this property.

The repeat property sets the canvas style background-repeat property.

This link can be useful to set the right value to this property.

The size property sets the canvas style background-size property.

This link can be useful to set the right value to this property.