🧩 Plasmo Developers�PD
🧩 Plasmo Developers•3y ago•
3 replies
Phoenix

Questions about the background of the extension (Tailwind)

I have this simple extension that have 2 images overlapped. The overlapped image is moved a bit to the bottom so the feet of the astronaut hangs over the extension window.

The problem is that the extension is adding me a "white background". I want this white background to be transparent and I don't know if this is possible.

This is my code:
popup.tsx:
import earth from "../assets/illus-earth.svg"
import astronaut from "../assets/illus-astronaut.svg"
import { useState } from "react"

<div className="w-[600px] h-[242px] bg-blue-dark">
  <div className="flex h-full">
    <div className="relative flex">
      <img src={earth} className="h-full w-full translate-x-1/2 overflow-hidden object-cover"/>
      <img src={astronaut} className="absolute h-[250px] bottom-[-15%] left-1/2 -translate-x-1/2"/>
    </div>
  </div>
</div>


index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;


#root {
  height: 100%;
  background: transparent;
}

body {
  background: transparent;
}
image.png
Was this page helpful?