By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,269 Members | 1,519 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,269 IT Pros & Developers. It's quick & easy.

PNG background-repeat bug in IE6

XedinUnknown
P: 1
Hi!

I am new to this forum, but not new to web design and programming. Nevertheless, I have never tried to use PNG so extensively in my pages. here's the problem.

First, I have found that the PNG backgrounds and images had no transparency and grey around them when viewed in IE6, but I solved this bug using this hack. It works great, but then another problem came up: a background image that had the solution applied to was not repeating itself where it should have. IE6 was just ignoring the background repeat. Below is the markup code for which the validator gives 3 insignificant errors:
[HTML]<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<TITLE>Пирожки ))</TITLE>
<LINK rel="stylesheet" type="text/css" href="css1.css">

</HEAD>

<BODY id="body">

<TABLE style="margin: 5px;" width="99%" cellpadding="0" cellspacing="0" border="0">
<!-- HEADER STARTS here -->
<TR>
<TD id="header_left" height="187" width="116">&nbsp;</TD>
<TD id="header_middle" height="187" align="center"><IMG src="logo.png" alt="Пироги"></TD>
<TD id="header_right" height="187" width="118">&nbsp;</TD>
</TR>
<!-- HEADER ENDS here -->
<TR>
<TD colspan="3" height="15"></TD><!-- This is the spacing between the header and the body -->
</TR>
<!-- The BODY STARTS here -->
<TR>
<TD colspan="3">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD width="206" height="70"><IMG src="center_top_left.png"></TD>
<TD background="center_top_middle.png" align="center" valign="top"><IMG src="slogan.png" alt="Слоган"></TD>
<TD width="224" height="70"><IMG src="center_top_right.png"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD background="center_middle_left.png" width="11">&nbsp;</TD>
<TD background="center_middle_center.png">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD width="163">
<!-- MENU box STARTS here -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<TR>
<TD background="mnu_btn.png" width="163" height="34" align="center">Row 1</TD>
</TR>
<TR>
<TD background="mnu_btn.png" width="163" height="34" align="center">Row 2</TD>
</TR>
<TR>
<TD background="mnu_btn.png" width="163" height="34" align="center">Row 3</TD>
</TR>
</TABLE>
<!-- CONTENT box ENDS here -->
</TD>
<TD style="padding: 25px">
<!-- CONTENT box STARTS here -->
<TABLE cellpadding="0" cellspacing="0" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>
<!-- CONTENT box ENDS here -->
</TD>
</TR>
</TABLE>
</TD>
<TD background="center_middle_right.png" width="12">&nbsp;</TD>
</TR>
<TR>
<TD background="center_bottom_left.png" height="12"></TD>
<TD background="center_bottom_middle.png" height="12"></TD>
<TD background="center_bottom_right.png" height="12"></TD>
</TR>
</TABLE>
</TD>
</TR>
<!-- The BODY ENDS here -->
</TABLE>

</BODY>

</HTML>[/HTML]

I really needed the image to repeat. And I was almost out of hope when posting here, but my pride has saved me: I decided to read the comments to the above posted solution for the transparency problem. And I found it, though I couldn't find it anywhere else. For those, who don't feel like looking for it in the comments, here's the citation:

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.


I hope this helps whoever has encountered a similar problem. Good luck!
May 21 '08 #1
Share this Question
Share on Google+
2 Replies


hsriat
Expert 100+
P: 1,654
I had the same problem, but I never searched for such way outs. I just converted the PNG to GIF and applied it as background-image.

Another thing that may bother you later is gamma channel in the PNGs. IE (even IE7) doesn't support gamma channel which, to a layman, seems like the color is different from what it was actual. So its better to use GIFs, if you can convert one. If you need to know how to convert a PNG into GIF, just download GIMP.

And have a look at this page if you want to know exactly what the problem is.
May 23 '08 #2

P: 32
poe
This "fix" really only works for simple PNG images that will work when stretched. If that's the case, an equivalent GIF would be a better choice for the image anyways. I don't understand what can't be achieved with a GIF?
May 23 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.