Fading an image

[tshad]

I am trying to fade an image so that the image is only partially seen in the
background.

I tried:

#headerImg {
margin: 0 auto;
height: 224px;
background: url(../images/bg/header_image.jpg) no-repeat top left;
filter: alpha(opacity=30);
}

It works fine without the Filter: and shows the full image.

When I have the Filter you can see it but the background of the page is
making the image dark. The Background is dark blue.

I am trying to put writing on top of the picture. Is there a way to make
the background behind the image white?

The line in the actual page is:

<div id="headerImg" class="width"></div>

Thanks,

Tom

 

[tshad]

I finally got it to work. If I create the white background in the same div
(change the css), I get the same result. It uses the image and not the
background-color.

#headerImg {
margin: 0 auto;
height: 224px;
background-color:White;
background: url(../images/bg/header_image.jpg) no-repeat top left;
filter: alpha(opacity=10);
}

When I tried to put a div around it and color that which but it went all the
way to the left and right borders where the image was centered on the page.

<!-- #headerImg: holds the main header image -->
<div style="background-color:White">
<div id="headerImg" class="width"></div>
</div>

But I then tried to use the width class (776px) on the outside div:

The classes:

/* Column widths */
..width {
width: 776px;
color: White;
}

..widthContent {
width: 776px;
background-color: White;
}

<!-- #headerImg: holds the main header image -->
<div class="widthClass">
<div id="headerImg" class="width"></div>
</div>

This worked as I wanted.

But I am curious, using asp.net 3.5, I get an error in my css page where I
have:

filter: alpha(opacity=20);

The error is:

Error 10 Validation (CSS 2.1): 'filter' is not a known CSS property name.

Even though I get this error, it works fine.

I also have to close my css file or the error shows in my error list panel
(even though it still works).

Thanks,

Tom