Setting different background images, for each tab in a multiple tab container, pn.Tabs

Panel
1

Hi all,

I would really appreciate any help with setting different background images to a set of tabs, pn.Tabs. I google and found the following link: widget on svg image background - #3 by utkarshs1994
After some clean up I got the following code operational but extending the original idea to each tab, or locating other widget on top of the image to provide dynamic functionality (some kind of workflow, with inputs and outputs), …, well clearly I am lost :frowning:

Thanks for any help you can provide me

import panel as pn
import param

pn.extension(sizing_mode="stretch_width", template="fast")

class ImgBackground(pn.reactive.ReactiveHTML):
    object = param.Parameter()
    img = param.String()

    _template = """
    <div id="pn-component" style="height:100%;width:100%">
        <div id="background" style="background-image: url(${img});
                                    background-repeat: no-repeat;
                                    background-attachment: scroll;
                                    background-position: center center;
                                    background-size: auto;
                                    height:100%;
                                    width: 100%">
        ${object}
        </div>
    </div>
    """
button = pn.widgets.Button(name="Click me!", button_type="primary", margin=(-60, 0, 0, 0))
# the layout is the key. We need load all the components and its compostion hear
layout=pn.Row(pn.Spacer(), pn.Column(pn.Spacer(height=300), button), pn.Spacer())

svg_background = ImgBackground(object=layout, height=550, 
                               img="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg").servable()