Ok,
I tried to look and see if this had been posted already and didn’t see anything like it so excuse me if this has already been posted.
I’m working on designing and dev on a site that I’m trying to use a transparent png as a background within a div as a design element so that you can still see the main background of the site. Everything looks great in Firefox, Safari and Google Chrome, however, my client requires us to make sure the site is fully compatible in IE7 and 8.
Now I know PNGs are supported in IE7 and up but I’ve come across an issue that’s causing IE7 to either drag heavily or crash out the browser altogether. I’ve found forum posts stating that the optimal sizes are 1×1, 4×4 or 10×10 for tiling backgrounds. I tried all of those and it seems like 10×10 drags a little less but when you scale the browser it still drags and 4×4 seems to be just as slow if not slower. now when I use a 1×1 PNG there is no longer drag but the background now has a gradient fade out to 0 opacity starting from top left running horizontally and vertically and it’s supposed to be solid all the way thru. example http://www.matsumotodesign.com/pointmarc/test1.htm using 1×1. here’s the example if I use a 10×10 png http://www.matsumotodesign.com/pointmarc/test.htm
I’ve tried adding zoom:1 to the div element. not sure where I found that but it didn’t work.
heres the style that I’m implimenting:
#mainContent {
background:transparent url(images/content_bg1.png) repeat 0 0;
overflow:auto;
padding:10px;
margin: 10px 0px 50px 40px;
}
any help would be greatly appreciated.
