Provide support for background image in terminal

[zxdong262]

In previous versions when set css background image for .xterm-viewport use css

#container .session-current .xterm-viewport {
    background-image: url("./images/electerm-watermark.png");
}

I can easily control terminal background, after uprade to latest release, .xterm-viewport is covering the terminal input, the background image would cover the user input layer

Can we get back the support for background image? Or there is another way to do it?

[Tyriar]

You should be able to do it a different way with CSS, try :before with z-index an element under .xterm-rows

[zxdong262]

Thank you for the reply, as I investigated, when we use non-dom way, .xterm-rows does not exist, the text is in canvas, currently I did not find a way to set background as before, it is really a pity, because it is quite a feature that many users set their own custom background image for terminal

[Tyriar]

If you set allowTransparency you should be able to use the webgl renderer too. FYI the canvas renderer that you're using there no longer exists. You get on the latest and greatest via the beta tag of the @xterm/xterm/@xterm/addon-webgl packages.

[zxdong262]

When use webgl renderer, allowTransparency=true, the result is same, I have done many experiments to confirm, no luck yet, anyway to put text layer without background back on top of xterm-viewport? Then we can get the background feature back

[Tyriar]

When trying to do this in the demo I got transparency working fine by setting allowTransparency and a transparency background color in the theme and then I needed to also get rid of this style:

Does that work for you?

---

Also I notice .xterm-viewport has an opaque inline bg color in your screenshot, any idea why?

[zxdong262]

@Tyriar Thank you!

Problem resolved! The background color is from themeConfig, if I delete the themeConfig.background, it would use default black, after set themeConfig.backgroun to (0,0,0,0), the transparency would work!