transparent terminal background with a background image

[zundaren]

[jerch]

For usage questions plz use discussions. Also try to rephrase your question and give more context, whats "the base64 background image" meant to be?

[jerch]

background of the theme setting addresses a VT BG color setting, this can only be a color value, as the VT standard does not understand anything else.

For a background image shining through you have to trick a bit - you can set the background theme color to contain an alpha channel and give your outer container div a background image instead, example:

<div id="terminal" style="background-image: url('bg.png');"></div>
<script>
const term = new Terminal({
  allowTransparency: true,
  theme: { background: "#00000080" }
});
term.open(document.getElementById('terminal'));
</script>

[zundaren]

<template><div class="mterm" ref="termRef"/></template>

< script>
const termRef = ref()
// termRef = underfined

onMounted(()=> {
const term = new Terminal({
allowTransparency: true,
theme: { background: "#80" }
});

term.open(termRef.value)
})

</script>

i use vue3, Because I need to create many terminals，so used
if used document.getElementById(), display fault between multiple terminals, every terminal need a different "id"

[jerch]

Plz try at least to give some effort in writing question or answers here. What should I take from your last post? Or other peeps, that will later stumble over this thread? That the id must be unique in a HTML document? Thats common knowledge and not relevant to answer the transparent bg question here.

If you want to give an example in vue, then plz use code markdown tags, so ppl can it read better. Atm your response is just a cryptic bunch of characters.

Sorry for shooting at you like this, but recently we get tons really weakly phrased issues/questions. If it keeps this way, I just gonna close these right away.

[zundaren]

Sorry for causing you trouble。

The problem I have now: when I use vue3, I need to create many terminals, each of which is unique, so when I create a terminal in the onMounted(), termRef.value has a value, but the page cannot display background-image and is blocked by background-color.

Using your way can solve the problem, but the id between multiple terminals I need unique, can not influence each other。
Is there an example of vue3 that can be shown。

</template>
  <div class="my-xterm" ref="termRef"></div>
</template>

<script setup lang="ts">

const termRef = ref<HTMLElement>()
// termRef = underfined

let term: Terminal

function createTerm() {
  term = new Terminal({
    allowTransparency: true,
    theme: { background: "#00000080" },
  });
  
  term.open(termRef.value as HTMLElement)
  term.focus()
}

onMounted(() => {
 createTerm()
})

</script>

[Tyriar]

The way to have an image as the background is to enable transparency and use a fully transparent background, similar to what you're doing. I believe Tabby uses transparent backgrounds so you could use that as a reference

https://github.com/Eugeny/tabby/blob/d6d273b2fb18b6659d382003abfdf09bd28aa512/tabby-terminal/src/frontends/xtermFrontend.ts#L99