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.