Transparent image position

[01complexlogic]

Hi mates, can someOne help me. Actually i have two same size images. One is transparent and second one is normal. I need to fix transparent on top of normal bt i don’t want to put normal image in css..My code is like
<div style="height:120px; width:120px;background-image:url(transparent.gif)">
<img src="real.gif" height="120" width="120" />
</div>

[Dabrowski]

Can I ask.....what's the point?

[01complexlogic]

Hi Dabrowski,
My point is if i use following code then transparent image will go behind the real image so i cant see it.. is there anyway to bring that transparent image on top of real image...
One possibility is if i swap these images but i don’t want to put real image in css...Did you get my point?

<div style="height:120px; width:120px;background-image:url(transparent.gif)">
<img src="real.gif" height="120" width="120" />
</div>

[SuzyUK]

It's all to do with stacking levels you can't bring the background of a div above it's content (the real image)

you need to take the image out of that div and instead have them one after the other, then move the div containing the transparent image back over the top of the real image. If you simply use a negative margin, the browsers will handle it differently so you also need to specify a new stacking context and this is done by using position relative and a z-index.

e.g.

CSS:
.overlay {
height:120px;
width:120px;
background: url(transparent.gif);
margin-top: -120px;
position: relative;
z-index: 1;
}

HTML:
<img src="real.gif" height="120" width="120" />
<div class="overlay">&nbsp;</div>

You should use the negative margin rather than the top co-ordinate or else the nature of relative positioning will leave a space where the div containing the transparent image would be in the normal flow.

let us know if that works for you

Suzy

[Dabrowski]

Again, what's the point?

If you put a transparent image on top of anything, the effect will look exactly the same?

[Robin_reala]

The point would be to stop users being able to right click / Save Image As. It's pretty worthless as anyone determined will just grab it out of the cache, but it'll stop 'normal' users I suppose.

[benihana]

you could do something like:

HTML:
<img src="transparent.gif" id="trans">

CSS:

img#trans {
background:url(real.gif);
}

[SuzyUK]

>>the point.. dunno in this case

it could be to put a semi transparent image over another to give a faded out/watermark effect -
as is popular at the minute for 'fading out' the background of the screen?

[SilverLining]

...to give a faded out/watermark effect...

Sounds like it, but to get the faded effect, a gif probably won't be much use. You will need to use PNG-24.

[Dabrowski]

Negative on last.....

Both IE and Moz support proprietry alpha transparency CSS rules that can be applied to ANY element, not just images:

.halftransparent {
filter: alpha( opacity=50);
-moz-opacity: .5;
}

As for not right clicking on the image, try adding onContextMenu='return false;' to your IMG tag.

[Robin_reala]

Actually, Moz supports the standard 'opacity' property now as well as the older -moz-opacity (which probaby lshouldn't be used on live websites as it was only ever intended for testing + internal chrome use).

Regarding your right-click protection, I like most other Firefox users I know turn this off (Tools / Options / Content / Advanced / Disable or replace content menus).

[edited by: Robin_reala at 12:57 pm (utc) on April 5, 2007]

[Dabrowski]

but it'll stop 'normal' users I suppose

[SilverLining]

Dabrowski, just to be clear. My suggestion for using a .png rather than a .gif was merely to ensure a smooth fade. Transparent gifs are really pixelated, as I'm sure you aware.

[Dabrowski]

If you want a gradient fade yes, but doesn't work in IE6 without JS hacks.

If you just want to semi-transparent a whole element then the CSS works.

I have used both method myself, but prefer the CSS if possible, it's cleaner.

[01complexlogic]

hi SuzyUK,
Yes u right, i have transparent image with text on top corner which i want to show on top of some images where i need it...
Thanks for your help, i will go for you first suggestion
Thanks again to all Repliers

[Xapti]

A better option than with a negative margin to get two objects overlapping eachother:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<header>
<style type="text/css">

span.container{position:relative} /* or if you want to position it absolutely on your page, that's fine. We just need to set it to something other than it's default so it can be a proper container */
span.container img{vertical-align:top}
span.container img.overlap{position:absolute;left:0;top:0;z-index:whatever;}
</style>
</header>
<body>
<span class="container">
<img src="img1">
<img src="img2" class="overlap">
</span>
</body>
</html>

I don't really know why the vertical-align:top needs to be there, but it won't overlap 100% on at least one browser if you don't have it (firefox 1.5011)
This method is nice because it actually positions two elements exactly on top of eachother, while you can still keep normal flow of things that follow, and still make use of margins, or whatever else.
If you don't care about the space the images take up in the flow, you can position them both absolutely, but then since the container has no content, it's size becomes zero, and your page flow breaks (which won't matter if you're absolute positioning the container or something)

[edited by: Xapti at 11:16 pm (utc) on April 6, 2007]