CODEWITHSUNDEEP
htmlcss
BadDev
BadDev

Reputation: 47

Display content on transparent image

I'm trying to display html elements (forms, text, etc) on an image, which has been made transparent with gimp. But whatever I tried, the content is hidden by the image.

I've changed the page's background color just to be sure the browser wasn't changing the transparent part to white for some reason, and it does not.

I also have tried to play with the z-index property but this didn't work.

On reloading the page, I can see the text displaying correctly, but then the image displays and overlays it.

#foo{
  position: relative;
}

#foo img{
  width: 20%;
  height: 20%;
}

#bar{
  position: absolute;
}
<!DOCTYPE html>
<body>
<div id='foo'>
   <img src='my_img' />
   <div id='bar'>
   <!--This is where I want to write what will be displayed on the transparent image.-->
    </div>
</div>
</body>

I didnt find any similar situations, neither here neither on other websites so any suggestion is welcomed.

Edit: Actually I set the top and left CSS properties and it's now working fine.

Upvotes: 2

Views: 60

Answers (1)

Nosnetrom
Nosnetrom

Reputation: 161

Have you considered background-image?

#bar {
  background-image: url('/path/to/myimg.jpg');
  background-size: contain;
  background-position: center center;
}

Upvotes: 2

Related Questions