none
png with opacity fades to nothing

    Question

  •  

    Hello all,

     

    I have a div with the following properties:

     

    position:absolute;

    top:125px;

    margin-left:1%;

    width:70%;

    margin-right:1%;

    background-image:url(../image/box.png);

    padding:5px 5px 5px 5px;

    border:1px solid #707070;

    height:auto;

     

    which should allow the box.png to repeat at will on both axis. The box png has an opacity of 80%. While it starts as it should in the upper left corner it fades going down and to the right (creating a nice radial effect) until the page background is completely visible.

     

    an example screenshot can be seen at www.derekgrape.com/demo/fade_issue.jpg

     

     

    Thanks

     

    Wednesday, October 29, 2008 9:39 PM

All replies

  • I figured it out. For some reason the png had to be larger than 1px by 1px. 5x5 works fine.

     

     

     

    Thursday, October 30, 2008 3:45 PM
  • Hi juiceman

    This is a great post! I had this issue in IE7 and IE8 rc1 while using a semi-transparent png with 1x1px dimension. After resizing to 5x5px I had what I wanted and no more odd behavours.

    I wonder if Microsoft is aware of this, since it is still an issue in IE8 rc1.

    Cheers

    tj
    Thursday, March 05, 2009 9:40 AM