remove dimnishing effect from the content of div

[maliksleo]

<div style="width: 100%; height: 100%; background-color: #999999; filter: alpha(opacity=85); 
                opacity: 0.7; position:fixed; left: 0px; top: 0px; bottom:0px; right:0px; text-align: center; vertical-align: middle; z-index:100"> 
                <img src="images/process.gif" style="margin-top: 32%" /> 
            </div>

this is my div code now the problem is that when this div apears in the page the image placed in side the div also become dim with the opacity of div. But i dont want it to do so.
I want to show the image without dimnishing effect please help me.
I placed other tags with dofferent css inside this div but result is the same.
Please guide me.

Thanks
maliksleo

[omerbutt]

<div style="width: 100%; height: 100%; background-color: #999999; filter: alpha(opacity=85); 
                opacity: 0.7; position:fixed; left: 0px; top: 0px; bottom:0px; right:0px; text-align: center; vertical-align: middle; z-index:100"> 
                <img src="images/process.gif" style="margin-top: 32%" /> 
            </div>

this is my div code now the problem is that when this div apears in the page the image placed in side the div also become dim with the opacity of div. But i dont want it to do so.
I want to show the image without dimnishing effect please help me.
I placed other tags with dofferent css inside this div but result is the same.
Please guide me.

Thanks
maliksleo

hi maliksleo
it will not work because you are applying a div/container opacity and everthing inside that div will be effected by this effect can you describe what are you trying to do because may be there is some other way to do it
regards,
Omer Aslam

[Frinavale]

hi maliksleo
it will not work because you are applying a div/container opacity and everthing inside that div will be effected by this effect can you describe what are you trying to do because may be there is some other way to do it
regards,
Omer Aslam

I have a feeling that the OP is looking to display the <div> on top of the page content (judging by the width and height style being set to 100%)... and they are looking to make this <div> transparent but not the image.

So, I'm going to recommend moving the image out side of the <div>.
Give the image a style with a position:fixed and set the z-index.

Set the z-index of the <div> to a lower value than the z-index of the image.

This will make the <div> appear faded and on top of the page content...
And it will make the Image appear on top of the <div> with no faded effect.

[maliksleo]

I have a feeling that the OP is looking to display the <div> on top of the page content (judging by the width and height style being set to 100%)... and they are looking to make this <div> transparent but not the image.

So, I'm going to recommend moving the image out side of the <div>.
Give the image a style with a position:fixed and set the z-index.

Set the z-index of the <div> to a lower value than the z-index of the image.

This will make the <div> appear faded and on top of the page content...
And it will make the Image appear on top of the <div> with no faded effect.

thanks Frinavale you made it very easy for me thanks

maliksleo

[Frinavale]

One other thing to note, that I just discovered yesterday actually...

The <div> that covers the page content has to exist under the rest of the page content (in the HTML) otherwise elements with a style position:relati ve will appear on top of it.

See this thread for an example of what I'm talking about.