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

 

[123Jim]

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

Why not create a new image in your image editor with the faded properties
your want on a white background you want?

 

[Andy]

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

Hi Tom,

If you want to specify a background colour AND a background image at the
same time use this...

background: #FFFFFF url(../images/bg/header_image.jpg) no-repeat top left;

.... in your stylesheet.


Andy

 

[Jukka K. Korpela]

What the hell is filter: alpha(opacity=30)?

It's a Microsoftism. KVG "filter alpha opacity".

Use opacity: 0.3, which is CSS3 but widely supported.

Except in most browsing situations. The Microsoftism works more widely, but
you can of course use both and cover probably well over 95% of browsing
situations.

Everything has a background colour as well as a background image.

Formally yes, but they can be (and they are by initial values) transparent
and none, which do not specify any actual colour or image.

Or use the individual background properties (I think I read somewhere
some browsers get the shorthand ones wrong).

That may have been so in the previous millennium, or some browsers may have
got the individual properties. Not relevant these days. It is more relevant
to remember that the shorthand always sets _all_ background properties.

PS. "KVG" is a Fennism, for "Kato vaikka*) Googlesta", roughly translatable
as "Why don't you google for it, dude?"
*) or v****, an originally obscene word.

 

[Jukka K. Korpela]

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

I tried:

Haven't you been around long enough to understand the importance of posting
a URL, not some code snippet?

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.

When you make the div element, including its background, partly opaque, what
did you really expect?

I am trying to put writing on top of the picture.

How is this relevant? What do you really mean by that? URL?

Is there a way to
make the background behind the image white?

Since the image is here a background image, you would just need to set the
background for the element that encloses your element. In this case, you
would wrap the div element inside another div element with the same
dimensions.

The line in the actual page is:

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

So you want nothing to appear when CSS is off _or_ images are not displayed
_or_ background images in particular are not shown (common default in
printing). This may well make sense if this is really just a decorative
banner, but... who knows, without the URL?

 

[tshad]

What the hell is filter: alpha(opacity=30)?

Use opacity: 0.3, which is CSS3 but widely supported.


Everything has a background colour as well as a background image. You
can use the shorthand property like this:

background: white url(bla) no-repeat top left;

I ;might give that a try.

I had already solved the problem by:

<div style=" background-color:White">
<div id="headerImg" class="width"></div>
</div>

But seems a little cleaner.

Thanks,

Tom

 

[tshad]

Hi Tom,

If you want to specify a background colour AND a background image at
the same time use this...

background: #FFFFFF url(../images/bg/header_image.jpg) no-repeat top
left;
... in your stylesheet.

That didn't work.

I changed mine to:

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

<td style="height:90px">
<div id="headerImg" class="width"></div>
</td>

But that didn't work.

This does work.

<td style="height:90px">
<div style=" background-color:White">
<div id="headerImg" class="width"></div>
</div>
</td>

Thanks,

Tom