Diagram background image

[David]

Hi,

i have a problema when i try put backgroud image in diagram.

Version 14:

http://jsplayground.syncfusion.com/dk0kgxmd

$("#diagram").ejDiagram({

width: "100%",

height: "600px",

nodes: nodes,

//backgroundColor: "whitesmoke",

backgroundImage: "http://2.bp.blogspot.com/-6Unz0GdPIPE/Ti_XYAe8okI/AAAAAAAABd0/FY4zKhSy6g4/s1600/Opera-Background-Blue-Bubbles.png",

enableContextMenu: false

});

and try same in documentation:

var bk = {

source: "http://2.bp.blogspot.com/-6Unz0GdPIPE/Ti_XYAe8okI/AAAAAAAABd0/FY4zKhSy6g4/s1600/Opera-Background-Blue-Bubbles.png",

alignment: "xmidymid",

scale: "meet"

};

$("#diagram").ejDiagram({

width: "100%",

height: "600px",

nodes: nodes,

//backgroundColor: "whitesmoke",

backgroundImage: bk,

enableContextMenu: false

});

Don't work... but when i try with version 13 work fine!:

http://jsplayground.syncfusion.com/iszx4xzd

$("#diagram").ejDiagram({

width: "100%",

height: "600px",

nodes: nodes,

// backgroundColor: "whitesmoke",

backgroundImage: "http://2.bp.blogspot.com/-6Unz0GdPIPE/Ti_XYAe8okI/AAAAAAAABd0/FY4zKhSy6g4/s1600/Opera-Background-Blue-Bubbles.png",

enableContextMenu: false

});

Any ideas?

[Shyam G]

Hi David, 

In the previous version, background image is set to the diagram viewport. Currently, the background image is set to diagram content(Page settings/nodes size). However please set pageBackgroundColor as transparent to achieve your requirement. we have modified the JSPlayground link and provided below. 

JSPlayground link:http://jsplayground.syncfusion.com/f2ezvb5g 

Regards, 

Shyam G 

[Carlos Lopez]

Is it possible to achieve this [setting a background image] same functionality using angular 1 diagram directive ? I am trying to set the diagram property via a vm property using controller as syntax.

[Shyam G]

Hi Carlos, 

We have created a JSPlayground link to achieve your requirement.  

JSPlaygroundlink:http://jsplayground.syncfusion.com/hhrfzz1z 

Regards, 

Shyam G