Question

I am designing a site and I’m having transparency issues in all browsers I’ve tested in.

Here’s how I want my images to stack up, from lowest z-index to highest:

1. background tile (JPG)

2. tilted photo frame (PNG) // obviously because this is tilted, it’ll need to be transparent on the sides to let the background tile JPG show through

3. tilted photo (PNG) // this sits inside the photo frame, and the edges of this are also transparent, which is supposed to let the photo frame display (visually) around the photo

For some reason, the transparent parts of my photo are carving out parts of the photo frame, so instead of the frame showing through, I’m seeing straight through to the background tile (JPG). I’d rather keep the photo and the photo frame separated because I intend to implement a script that randomises the photo that is displayed in the frame upon page refresh.

I have uploaded an example of what I’m doing to http://jezenthomas.co.uk/temp

In my example, I have used GIFs, though I experience the same problem with PNGs.

When the problem is fixed, I’ll remove it from my webspace, so I hope I’ve explained it thoroughly enough for anyone else who might experience the same thing.

Answer 1

Your <span> element has the same background as your tiled background image 🙂

Your CSS:

html, body, div, [[[span]]]], applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font,
img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, 
tr, th, td {
    background-image: url("i/bg.jpg"); <----------
    border: 0 none;
    font-family: arial,serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}