Fading an image

Discussion in 'HTML' started by tshad, Apr 24, 2010.

  1. tshad

    tshad Guest

    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, Apr 24, 2010
    #1
    1. Advertising

  2. tshad

    123Jim Guest

    "tshad" <> wrote in message
    news:LaJAn.88510$...
    >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?
     
    123Jim, Apr 24, 2010
    #2
    1. Advertising

  3. tshad

    Andy Guest

    "tshad" <> wrote in message
    news:LaJAn.88510$...
    > 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
     
    Andy, Apr 25, 2010
    #3
  4. 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/
     
    Jukka K. Korpela, Apr 25, 2010
    #4
  5. 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/
     
    Jukka K. Korpela, Apr 25, 2010
    #5
  6. tshad

    tshad Guest

    Ben C wrote:
    > On 2010-04-24, tshad <> 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).
     
    tshad, Apr 29, 2010
    #6
  7. tshad

    tshad Guest

    Andy wrote:
    > "tshad" <> wrote in message
    > news:LaJAn.88510$...
    >> 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
     
    tshad, Apr 30, 2010
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael
    Replies:
    1
    Views:
    356
    Harald Hein
    Dec 23, 2003
  2. az bij

    Fading Frame Contents

    az bij, Oct 21, 2003, in forum: HTML
    Replies:
    6
    Views:
    927
    Mark Parnell
    Oct 23, 2003
  3. Frank McMahon
    Replies:
    3
    Views:
    7,825
    homer
    Jan 28, 2005
  4. tshad

    Fading an image

    tshad, Apr 24, 2010, in forum: ASP .Net
    Replies:
    1
    Views:
    511
    tshad
    Apr 25, 2010
  5. zelnugget

    Fading img's / input type="image"'s

    zelnugget, Feb 23, 2005, in forum: Javascript
    Replies:
    1
    Views:
    132
Loading...

Share This Page