A background image may be applied to a node’s body:

http://js.cytoscape.org/#style/background-image

interface BackgroundImage {
    background-clip?: PropertyValueNode<"none" | "clipped">;
    background-fit?: PropertyValueNode<"none" | "contain" | "cover">;
    background-height?: PropertyValueNode<string | number>;
    background-height-relative-to?: PropertyValueNode<"inner" | "include-padding">;
    background-image?: PropertyValueNode<string>;
    background-image-containment?: PropertyValueNode<"inside" | "over">;
    background-image-crossorigin?: PropertyValueNode<"anonymous" | "use-credentials">;
    background-image-opacity?: PropertyValueNode<number>;
    background-image-smoothing?: PropertyValueNode<"yes" | "no">;
    background-offset-x?: PropertyValueNode<string | number>;
    background-offset-y?: PropertyValueNode<string | number>;
    background-position-x?: PropertyValueNode<string | number>;
    background-position-y?: PropertyValueNode<string | number>;
    background-repeat?: PropertyValueNode<
        | "repeat"
        | "no-repeat"
        | "repeat-x"
        | "repeat-y">;
    background-width?: PropertyValueNode<string | number>;
    background-width-relative-to?: PropertyValueNode<"inner" | "include-padding">;
    bounds-expansion?: PropertyValueNode<
        | string
        | number
        | [string | number, string | number]
        | [string | number, string | number, string | number, string | number]>;
}

Hierarchy (view full)

Properties

background-clip?: PropertyValueNode<"none" | "clipped">

How background image clipping is handled; may be node for clipped to node shape or none for no clipping.

background-fit?: PropertyValueNode<"none" | "contain" | "cover">

How the background image is fit to the node; may be none for original size, contain to fit inside node, or cover to cover the node.

background-height?: PropertyValueNode<string | number>

Specifies the height of the image. A percent value (e.g. 50%) may be used to set the image height relative to the node height. If used in combination with background- fit, then this value overrides the height of the image in calculating the fitting — thereby overriding the aspect ratio. The auto value is used by default, which uses the height of the image.

background-height-relative-to?: PropertyValueNode<"inner" | "include-padding">

Changes whether the height is calculated relative to the height of the node or the height in addition to the padding; may be inner or include-padding.

If not specified, include-padding is used by default.

background-image?: PropertyValueNode<string>

The URL that points to the image that should be used as the node’s background. PNG, JPG, and SVG are supported formats. You may use a data URI to use embedded images, thereby saving a HTTP request.

background-image-containment?: PropertyValueNode<"inside" | "over">

Determines whether background image is within (inside) or over top of the node (over).

The default is set to inside.

background-image-crossorigin?: PropertyValueNode<"anonymous" | "use-credentials">

All images are loaded with a crossorigin attribute which may be anonymous or use-credentials.

The default is set to anonymous.

background-image-opacity?: PropertyValueNode<number>

The opacity of the background image. [0 1]

background-image-smoothing?: PropertyValueNode<"yes" | "no">

Determines whether background image is smoothed (yes, default) or not (no). This is only a hint, and the browser may or may not respect the value set for this property.

background-offset-x?: PropertyValueNode<string | number>

The x offset of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-offset-y?: PropertyValueNode<string | number>

The y offset of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-position-x?: PropertyValueNode<string | number>

The x position of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-position-y?: PropertyValueNode<string | number>

The y position of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-repeat?: PropertyValueNode<
    | "repeat"
    | "no-repeat"
    | "repeat-x"
    | "repeat-y">

Whether to repeat the background image; may be no-repeat, repeat-x, repeat-y, or repeat.

background-width?: PropertyValueNode<string | number>

Specifies the width of the image. A percent value (e.g. 50%) may be used to set the image width relative to the node width. If used in combination with background- fit, then this value overrides the width of the image in calculating the fitting — thereby overriding the aspect ratio. The auto value is used by default, which uses the width of the image.

background-width-relative-to?: PropertyValueNode<"inner" | "include-padding">

Changes whether the width is calculated relative to the width of the node or the width in addition to the padding; may be inner or include-padding.

If not specified, include-padding is used by default.

bounds-expansion?: PropertyValueNode<
    | string
    | number
    | [string | number, string | number]
    | [string | number, string | number, string | number, string | number]>

Specifies a padding size (e.g. 20) that expands the bounding box of the node in all directions. This allows for images to be drawn outside of the normal bounding box of the node when background-clip is none. This is useful for small decorations just outside of the node.

bounds-expansions accepts 1 value (for all directions), 2 values, ([topAndBottom, leftAndRight]) or 4 values ([top, right, bottom, left]).