PDA

Click to See Complete Forum and Search --> : Transparent Background PNG's (also tileable) for IE6 and Under?

XTREEMMAK
10-29-2007, 11:51 AM
Looking for sollutions. I have a background section that needs to be tiled to expand the site's height as the site gets more content. However, the ends of this background have translucency which IE6 and under (dumb) dont support. Is there a fix to this that will also alow me to tile the background? Or am I better off just making a 1600 pixel high image and using some script or java code to map that out and tile that section under as needed to the div's height?
WebJoel
10-29-2007, 12:08 PM
I have always had trouble with transparent *png background images not working right.
-Is the image something with seamless tiling, -or is it more like a color? A complex pattern?

Every time this topic comes up, there are one or two URLs that get posted that show 'how to do this' and the example they show (for me anyway, using Firefox's IE-view) do not work. I usually just use a *gif. But there is a way to get a filter effect to work for a background image (I usually use a *jpg for that) that very closely emulates the transluciency of a *png image.

Can you attach the image so we can see? I'll look for the filter code. I might have an example ready-made to show how..

back:

<style>
html {filter:alpha(opacity=40); -moz-opacity:.40; opacity:.40; background:url(image.jpg) repeat;}

</style> gets the *jpg into the page with partial transparency, -but anything 'overtop' of this shares the transparency. There is a fix for this, -I've seen it done before.
Here, this works only on "html". If used on "body", it shows full-opacity.

I've done this with large DIVs before, but the text/content is actually absolute-positioned below the relatively-positioned container, and moved 'up' and 'into' said container. Widths & padding does the rest.

hmm..
XTREEMMAK
10-29-2007, 12:29 PM
ok so these are the cuts:
http://img221.imageshack.us/img221/9017/prb1bc5.jpg

this is the section that I need tiled as a background with transparencies:
http://img164.imageshack.us/my.php?image=prb2pf1.jpg

the section's file should be attached to this post I think...
WebJoel
10-29-2007, 02:40 PM
It actually looks to me as if the section that you want 'transparency and tiling' could be best done with a transparent background (no background, allowing the body's background to show through)??

Why does this background even need to be *png? Would a *gif not work?

edit:

I found a neat javascript snippette that takes two color values and blends them, to form gradients. Maybe something like this would work?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
body, html {height:100%;}

#wrapper {min-height:100%; height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica,
sans-serif; background-color:none;font-style:normal; font-variant:normal;
font-weight:normal; margin:14px 0 4px 10px;}
h1 {font-size: 1.60em;}
h2 {font-size: 1.50em;}
h3 {font-size: 1.40em;}
h4 {font-size: 1.30em;}
h5 {font-size: 1.26em;}
h6 {font-size: 1.20em;}/* Defined default Header sizes*/

p {font-size:100%; font-size:1.0em; line-height:1.1em; margin:16px 0 12px 0;}
</style>



<script type="text/javascript"><!--
/*************************

Cross Browser Gradient Backgrounds
v1.0
Last Revision: 11.03.2005
steve(at)slayeroffice.com

please leave this notice in tact.

should you improve upon this code, please
let me know so that I may update the version
hosted on slayeroffice

--- to use --
reference this file (on your own server) as a javascript src
in the head of your document. give the elements
you want a gradient background applied to a class as such:

class="gradient 000000 ffffff horizontal"

See h t t p: //slayeroffice(dot)com/code/gradient/ for more examples.


*************************/

window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);

function createGradient() {
if(!document.getElementById)return;

objArray = getGradientObjects();
if(!objArray.length) return;

for(i=0;i<objArray.length;i++) {
params = objArray[i].className.split(" ");
if(document.all && !window.opera) {
objArray[i].style.width = objArray[i].offsetWidth + "px";
params[3] == "horizontal"?gType = 1:gType = 0;
objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
} else {
colorArray = createColorPath(params[1],params[2]);
x=0;y=0;
if(params[3] == "horizontal") {
w=Math.round(objArray[i].offsetWidth/colorArray.length);
if(!w)w=1;
h = objArray[i].offsetHeight;
} else {
h = Math.round(objArray[i].offsetHeight/colorArray.length);
if(!h) h =1;
w = objArray[i].offsetWidth;
}
makeGrandParent(objArray[i]);
tmpDOM = document.createDocumentFragment();
for(p=0;p<colorArray.length;p++) {
g = document.createElement("div");
g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
params[3] == "horizontal"?x+=w:y+=h;
tmpDOM.appendChild(g);
if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
}
objArray[i].appendChild(tmpDOM);
tmpDOM = null;
}
}
}

function getGradientObjects() {
a = document.getElementsByTagName("*");
objs = new Array();
for(i=0;i<a.length;i++) {
c = a[i].className;
if(c != "") if(c.indexOf("gradient") == 0) objs[objs.length] = a[i];
}
return objs;
}

function createColorPath(color1,color2) {
colorPath = new Array();
colorPercent = 1.0;
do {
colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
colorPercent-=.01;
} while(colorPercent>0);
return colorPath;
}

function setColorHue(originColor,opacityPercent,maskRGB) {
returnColor=new Array();
for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
return returnColor;
}

function longHexToDec(longHex) {
return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));
}

function toDec(hex) {
return parseInt(hex,16);
}

function makeGrandParent(obj) {
disp = document.defaultView.getComputedStyle(obj,'').display;
disp == "block"?nSpan = document.createElement("div"): nSpan = document.createElement("span");
mHTML = obj.innerHTML;
obj.innerHTML = "";
nSpan.innerHTML = mHTML;
nSpan.setAttribute("style","position:relative;z-index:10;");
obj.appendChild(nSpan);
}

// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>



<body>

<div id="wrapper" class="gradient c7e19e 49bdef vertical">
<h1>Main Header</h1>
<p>You can even do this gradient effect to DIVs!</p>
<p>You can even do this gradient effect to DIVs!</p>

<img alt="this is an image" src="#" style="width:300px; height:150px; border:2px solid black; margin:15px; backgrond-color:white " />

<h1>Main Header</h1>
<p>You can even do this gradient effect to DIVs!</p>
<p>You can even do this gradient effect to DIVs!</p>

<h1>Main Header</h1>
<p>You can even do this gradient effect to DIVs!</p>
<p>You can even do this gradient effect to DIVs!</p>

</div>

</body>
</html>