Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Fading an image

Reply
Thread Tools

Fading an image

 
 
tshad
Guest
Posts: n/a
 
      04-24-2010
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


 
Reply With Quote
 
 
 
 
123Jim
Guest
Posts: n/a
 
      04-24-2010

"tshad" <(E-Mail Removed)> wrote in message
news:LaJAn.88510$(E-Mail Removed)...
>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?


 
Reply With Quote
 
 
 
 
Andy
Guest
Posts: n/a
 
      04-25-2010


"tshad" <(E-Mail Removed)> wrote in message
news:LaJAn.88510$(E-Mail Removed)...
> 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

 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      04-25-2010
Ben C wrote:

> 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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      04-25-2010
tshad wrote:

> 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?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
tshad
Guest
Posts: n/a
 
      04-29-2010
Ben C wrote:
> On 2010-04-24, tshad <(E-Mail Removed)> wrote:
>> 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);

>
> What the hell is filter: alpha(opacity=30)?
>
> Use opacity: 0.3, which is CSS3 but widely supported.
>
>> 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?

>
> 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
> Or use the individual background properties (I think I read somewhere
> some browsers get the shorthand ones wrong).



 
Reply With Quote
 
tshad
Guest
Posts: n/a
 
      04-30-2010
Andy wrote:
> "tshad" <(E-Mail Removed)> wrote in message
> news:LaJAn.88510$(E-Mail Removed)...
>> 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.
>


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
>
> Andy



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Fading an image tshad ASP .Net 1 04-25-2010 05:31 AM
Fading img's / input type="image"'s zelnugget Javascript 1 02-24-2005 02:59 AM
Need fading image slideshow with thumbnails... Frank McMahon HTML 3 01-28-2005 04:06 AM
Fading away button click on tree node... Michael Java 1 12-23-2003 07:43 AM
Fading Frame Contents az bij HTML 6 10-22-2003 11:17 PM



Advertisments