Forum Moderators: not2easy

Message Too Old, No Replies

png images spradically disappearing

         

Ready

10:02 am on Oct 2, 2009 (gmt 0)

10+ Year Member



I have a strange problem ...

I'm working on a new site but a certain image magically tends to disappear sporadically. That div's code is pretty straight forward, too and nothing really out of the ordinary.
But why is it that the background image is (almost randomly) shown/invisible? Whenever its invisible Ctrl+F5 makes it visible again. Its not browser specific either, tested with firefox2, frefox3, chrome and IE7

Its a png image with alpha transparency btw.

.left_box_text{
background-image: url(images/top_fade_box.png);
background-repeat: repeat-x;
position:relative;
color:#FFFFFF;
width:170px;
padding-left:5px;
padding-right:5px;
text-align:justify;
margin-top:0px;
z-index:10;
font-weight:bolder;
max-height:620px;
overflow:hidden;
}

vincevincevince

12:38 pm on Oct 2, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is more common than you might think. At the foundation is the fact that browsers will usually only show png background when the entire PNG file has been downloaded.

Here are a few of the causes I have seen in the past:

  • Internet is not performing well; those images are 'stalled' on the download (test with better connections!)
  • Poor cache-control on the server means images are downloaded fresh every time (test with expiry type headers)
  • Image is large, it just didn't have a chance to download
  • You are using a script which extends transparent PNG support to IE6 users (ie7.js or similar) - and it is buggy

    Try to isolate the problem; make the image into a small progressive jpeg and test that. You should learn something helpful.

    It is unlikely to be a CSS problem.

  • tangor

    12:48 pm on Oct 2, 2009 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



    One of my clients had a similar problem. Converted all pngs to jpgs... problem disappeared.

    Ready

    1:26 pm on Oct 2, 2009 (gmt 0)

    10+ Year Member



    2kb png image, in total the site (index w/ content and images) is 430kb on a 6mbit dsl connection.
    I'm not using any (IE6) hacks either (I simply disregard anything below IE7).
    I will look into the header stuff when I get back home though. No idea what it actually means but uncle google should help me out with that :)

    .jpg is no option here. I really need the image to be transparent.

    Thanks for the tips so far :)