The background options used by the canvas element, it's not drawn, it's applied in the style

Background

Color

The color property can be set to a HEX string or to a {@link 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.

Samples

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
}
}

Opacity

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.

Image

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.

Samples

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

Position

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

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

Repeat

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

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

Size

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

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

Hierarchy

  • IBackground

Implemented by

Properties

color: string | IRangeColor

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.

image: string

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.

opacity: number

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.

position: string

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

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

repeat: string

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

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

size: string

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

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