Background image position

In css (or in pure js) I can do somthing like this:
background: url(“path/path/img”) 80px 180px;

How can i do this for my node template?

Add a Picture behind your elements.

  $(go.Picture, "path/path/img", { width: 80, height: 180 })

Exactly how you do that depends on what kinds of Panel(s) that you are using in your Node template.

Read more at and and

Well 80px and 180px are background position. I understand how to display a picture, but how can i do clipping?

If you read the section about “Image Stretch” in, you’ll see that you can set Picture.imageStretch to go.GraphObject.None.

Yeah that is what I did but there seems to be nothing to control position of displayed part, it just shows the center of the image. My image is like 800x600, while the pic I want to put in GO.picture is 80x80 part of this image in a specified position.

Ah, so that is what you mean. Try setting Picture.sourceRect.

Wow man it works :D


But still it does not solve my problem. Becaouse i want to pass position as an argument (just like addnodeData arguments). I want 1 position->1 node
:/ Is there any way how to do that? Or i definitely need to create one template for each node?

Do you mean that the value for Picture.sourceRect needs to be different for different images? Use data binding and probably conversion functions to compute what you want.

thanks a lot man