Repeating PNG Images

[iqbal]

Hello,

I was having issues in displaying png images in IE6 browser which i fixed using the "behavior:url(iepngfix.htc);"

Now the other problem that i am facing is that the IE6 browser does not repeat a png across a "td"........i am trying to repeat a border that has a shadow that will display over a patterned body background.

for a better idea follow the link on our test url

Al Ahliya Manpower Recruitment Services

If you see the top and bottom border is visible as that is one image but the left and right are just showing a 1px chunk but no repeat.

I searched online and got few solutions (modifications in the htc file and css) but that din work out.

does neone have a solution to this problem??? Will be grateful to you guys

Regards
Iqbal

[langsor]

I use a different technic to make IE 6 handle png alpha transparency, but it sounds like you have the same limitation with the htc file as I do with JavaScript setting a CSS filter style when it knows it's IE 6...

If you do NOT have any alpha in your png files you can skip the htc file directive since IE does recognize png images but not with the alpha channel.

Otherwise I have always had to compromise (use jpg images or something) when publishing to IE 6 and you might have to too.

Good luck, let me know if you find a real solution.

[BSmithTTS]

I am guessing that the reason you want to use pngs in the first place is because you want to make sure that your border shadow blends into the background. You may have chose this direction because you don't know where the site will actually hit the patterned background.

As long as the site does not need to expand in width, I would actually come at it from a different angle. And your comment about the top and bottom being a single image each, make me think the site will in fact not be expanding.

so...

I would make a very wide but short background image (wide enough for any widescreen display but short enough in height to help keep the overall size down, and save it for web to help reduce the weight as well)... Then center the background with css.

Then with that in hand I would create my drop shadow images to line up with the pattern once you know exactly where it will hit. Being centered the site body and the background will always be together. Your new side dropshadow images will go from being 1px high to being the same height as your background (so the repeat will match)... but other than a few images being resized, it should fix the problem without any IE6 hacks.

There may be another way, but this is the first that comes to mind.

[iqbal]

I am guessing that the reason you want to use pngs in the first place is because you want to make sure that your border shadow blends into the background. .............first that comes to mind.

well thanks smith, i thaut of something similar but urs sounds more effective.......lemme work on it and see how it seems....neways thanks for the help...

[PixelPusher]

If I remember it right... then you can't repeat a background-image while using the png-fix for IE6.
Did u try it without the png-fix? Does the repetition work then?

[iqbal]

If I remember it right... then you can't repeat a background-image while using the png-fix for IE6.
Did u try it without the png-fix? Does the repetition work then?

yea it repeats without the png-fix........but shows the grey color as well...i came across a blog where the author had posted some changes in the pngfix file, but that din work for me........lemme search for it again and paste it here

[PixelPusher]

you should do some research in the search engines, I am pretty sure that I read some article about an advanced png-fix which allows the repetition of background images as well.

[iqbal]

you should do some research in the search engines, I am pretty sure that I read some article about an advanced png-fix which allows the repetition of background images as well.

here is wat i came across while searching.......im pasting from a site with the reference (hope its not against forum rules)....

"As mentioned earlier, repeating in any fashion is impossible. However, it is possible to ‘stretch’ the background over the whole area. If you’re using a solid translucent color png background, you can stretch it across the whole area.

To do so, first do the standard css:
.trans_white { background-image: url(trans_white.png); background-repeat: repeat; behavior: url(iepngfix.htc); }
Notice I added in the background-repeat. This is the variable that will indicate to the script to stretch it.

Now, we modify the script (iepngfix.htc) to look at the repeat: Find this:

style.backgroundImage = ‘none’; filt(s, ‘crop’);

Replace it with this:
style.backgroundImage = ‘none’; if(currentStyle.backgroundRepeat==”repeat”) filt(s, ‘scale’); else filt(s, ‘crop’);

Now, whenever a background has a background-repeat set to ‘repeat’, it’ll stretch the background image to encompass the whole area.

This can also be done to mimic repeat-x and repeat-y. You just need the div/td/whatever to ONLY encompass the area desired."
(reference: http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/)

i tried this but it din work for me....can anyone try and see if it works????