Options

Transparent no more?

olwickolwick Registered Users Posts: 4 Beginner grinner
edited December 16, 2008 in SmugMug Support
Hi,

At Andy's suggestion, I made the custom header on my home page a transparent PNG file. It's been working great but this morning that image is no longer transparent! It has a light blue or white background. In fact I had three versions of that same image in my "logo" gallery and all three have changed.

Any idea why this changed overnight?

http://olwick.smugmug.com/

The bad news is that I'm at work now and can't upload a new image till I get home.

Thanks,

Mark

Comments

  • Options
    jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited December 16, 2008
    What browser, browser version and OS version are you running at work? Could it be a browser that can't handle transparent PNGs?

    I'm seeing it fine here in IE7, FF3 and Safari on Vista:

    2008-12-16_0843.png
    --John
    Homepage • Popular
    JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
     Always include a link to your site when posting a question
  • Options
    olwickolwick Registered Users Posts: 4 Beginner grinner
    edited December 16, 2008
    Using IE6 (don't like IE7) and XP at work, MSN browser and XP at home.

    Mark
  • Options
    jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited December 16, 2008
    IE6 does not properly display transparent PNGs without some additional CSS that you don't have.

    Add the lines in red to your CSS:
    #my_banner {
width: 750px;
height: 180px;
margin: 0 auto;
background: url([URL="http://olwick.smugmug.com/photos/437264942_mTepy-O.png"]http://olwick.smugmug.com/photos/437264942_mTepy-O.png[/URL]) no-repeat;
[B][COLOR=red]_background:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image,[/COLOR][/B][COLOR=red]src[B]='http://olwick.smugmug.com/photos/437264942_mTepy-O.png');[/B][/COLOR]
}
    --John
    Homepage • Popular
    JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
     Always include a link to your site when posting a question
  • Options
    olwickolwick Registered Users Posts: 4 Beginner grinner
    edited December 16, 2008
    jfriend wrote:
    IE6 does not properly display transparent PNGs without some additional CSS that you don't have.

    Add the line in red to your CSS:
    #my_banner {
width: 750px;
height: 180px;
margin: 0 auto;
background: url([URL="http://olwick.smugmug.com/photos/437264942_mTepy-O.png"]http://olwick.smugmug.com/photos/437264942_mTepy-O.png[/URL]) no-repeat;
[B][COLOR=red]_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, [/COLOR][/B][COLOR=red]src[B]='http://olwick.smugmug.com/photos/437264942_mTepy-O.png');[/B][/COLOR]
}

    No luck John. Now I get this weird double image attached (plus the light background). I copied and pasted your code exactly. Any other ideas?

    Mark
  • Options
    jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited December 16, 2008
    olwick wrote:
    No luck John. Now I get this weird double image attached (plus the light background). I copied and pasted your code exactly. Any other ideas?

    Mark

    You were tooo quick. While you were implementing this, I added some more to my post. Please try one more time with latest version of the CSS in my previous post.
    --John
    Homepage • Popular
    JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
     Always include a link to your site when posting a question
  • Options
    olwickolwick Registered Users Posts: 4 Beginner grinner
    edited December 16, 2008
    jfriend wrote:
    You were tooo quick. While you were implementing this, I added some more to my post. Please try one more time with lastest versino of the CSS in my previous post.

    That worked! Thank you SO much John!

    Mark
Sign In or Register to comment.