How to combine a image with widgets?

I have a question for which I cannot find any practical solution. I would like to add some sliders beneath some of the elements of this block diagram. For example I would like to add a slider, which controls N[k] directly under the variable in the image.

To my understanding it is possible to do this with a GridBox from ipywidgets. I simply dont understand how to put an image “behind” the sliders, or the sliders on top of an image. Any help is much appreciated.

You can use Widget._dom_classes and an extra HTML widget with a <style> tag to achieve something like this:

I’ve used “boring” boxes: you can probably make this happen with the grid-based one as well, but once trying to do pixel-level matching, it can be easier to just use left and top to do exactly what you want.

It’s also possible to embed the image directly with b64encode and a data uri.

import ipywidgets as W

style = W.HTML("""
    background-image: url("");
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
    width: 800px;
.my-sliders .widget-slider { position: absolute; }
.my-sliders > :nth-child(1) { left: 0px; top: 165px; }
.my-sliders > :nth-child(2) { left: 390px; top: 165px; }
.my-sliders > :nth-child(3) { left: 200px; top: 0; }

box = W.VBox([
], _dom_classes=["my-sliders"])
display(style, box)

Hey bollwyvl,
thank you very much for your help. I just tried your solution and it works perfectly.