CODEWITHSUNDEEP
htmlcssimagebackground
Caio Tsubake
Caio Tsubake

Reputation: 111

Make a div transparent but not the image inside

I want to have a div that has an image inside, but with the div and background being completely transparent, giving the impression the image exists alone, with the elements behind the background of the div appearing.

I've tried using rgba in several ways, such as background: rgba(204, 204, 204, 0.5); but all of these end up leaving a white background on the div when set to total transparency.

How can I implement this?

EDIT Here is a picture: This is a crop of the UI screen. The red button is the image and the white is the div backgroud.

How can I make the red button appear as normal, but be able to see what is behind the white part?

My HTML is as such:

<div id="transparent-background">
    <img src="./images/ui/chat.gif" class="arrow-button"/>
</div>

Thanks,

Upvotes: 0

Views: 1407

Answers (1)

Johannes
Johannes

Reputation: 67778

Just use this CSS for your DIV:

#transparent-background {
  background: transparent;
}

Upvotes: 2

Related Questions