Transparent PNG as Background Image

Question

Hello,

I have an element with a transparent png as its background image - it's like a polaroid with the photo bit cut out so just the frame is showing.

With this as the background I then want a standard image to sit behind the element that has the transparent png background - to fit inside the frame.

i've tried setting z-indexing and opacity and although I can get the image to show through its obviously transparent because of the opacity settings.

Any ideas?

Answer 1

If .yourPhoto is a background image, you could do this:

<div class="yourPhoto">
    <div class="yourPNGframeImage">
    </div>
<div>

Or you could use inline images and position both absolute:

 <div class="container">
      <img class="yourPhoto" src="">
      <img class="yourPNGframeImage src="">
 </div>

.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}

Answer 2

there is a fair few things to look out for when doing PNG.

1. when cutting make sure you background is off.
2. export as png24.
3. if your in ie6 you will need to use someting like twin-helix png fix
4. http://www.twinhelix.com/

Try these steps. You should not have to change the opacity of your image as it will affect the whole image. When you use z-indexing you should also put in the position css element