🧩 Plasmo Developers•2y ago

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>

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;
}

@tailwind base;
@tailwind components;
@tailwind utilities;


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

body {
  background: transparent;
}

2 Replies

PhoenixOP•2y ago

anyone?

Arcane•2y ago

@Phoenix has reached level 1. GG!

Gaming

Programming

Questions about the background of the extension (Tailwind)

Did you find this page helpful?