Scalable Background Images

**nevdawg** · 08-16-2007, 05:18 PM

Hello,
I have spent way to much time trying to figure out this problem. And I have no idea why this is happening.

I am trying to make my background images scalable in IE7. I have found a working example here: http://home.comcast.net/~ansiguy/alpha_image_test_2.htm

I copied the <style> directly from that website and put it in my own and changed the image url of course.

This is what I copied:

Code:

<style type="text/css">
	.forgroundcontent {
	position:relative;
	}
	.backgroundcontent {
	display:none;
	}
	html {	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='themes/Milo/style/backgrounds/rotator.php', sizingMethod='scale');
	}
</style>

I just get a blank screen, yet on this other persons website, it works perfectly. My suspision is that it has to do with the html { } part. Any ideas?

Thanks so much!

**naiani** · 08-16-2007, 05:35 PM

Did you include the background the same way as on the website, using an IMG tag and defining the class=".backgroundcontent" for it?

-----

EDIT: Also, do you have the file rotator.php that apparently is extremely important for the "thing" to work?

-----

Another thing: I know it sounds *****y, but why would you use this kind of proprietary attribute? It's not a good idea, since it won't be interpreted the same way by different browsers, what might screw up your design. If you still want to use it, just make sure that it's not an essencial part of the "look'n'feel"/experience of your website, or you'll probably leave users that don't use a compatible browser (here it works both on IE7 and FF(!!!!)) out of it.

**nevdawg** · 08-16-2007, 05:43 PM

yes, I have set up both the <div class="forgroundcontent"> and the <img class="backgroundcontent" src="themes/Milo/style/backgrounds/rotator.php">

now, I can get it to work. But the only way to do that is to change html { } to body { }... But doing that makes all the links on the page unclickable.

So I want to try and keep the html { } if I can.

**naiani** · 08-16-2007, 05:50 PM

I don't know if it was just a typing error, but the file you're supposed to use for the tag IMG is the curlyansp_ie_bg.png, not the rotator.php. The .php file goes in the .backgroundcontent class, in the STYLE tag.
Also, it would be easier if you posted your HTML code so we can see what is causing the conflict. But my guess is that there's something referring to a background attribute in the body {...} that is conflicting with the one in the html {...}. Post the whole CSS and the HTML code, or the link for the page, so we can see everything that is happening.

**nevdawg** · 08-16-2007, 06:10 PM

Originally Posted by naini

EDIT: Also, do you have the file rotator.php that apparently is extremely important for the "thing" to work?

All rotator.php does is looks for a random .png in a folder and uses it as the image. It is in no way linked to the problem.

Originally Posted by naiani

Another thing: I know it sounds *****y, but why would you use this kind of proprietary attribute? It's not a good idea, since it won't be interpreted the same way by different browsers, what might screw up your design. If you still want to use it, just make sure that it's not an essencial part of the "look'n'feel"/experience of your website, or you'll probably leave users that don't use a compatible browser (here it works both on IE7 and FF(!!!!)) out of it.

Yes, I have a script which detects the users browser and uses a different method if it is Firefox. But this attribute is the only way I can get it to work in IE7

Here is the stripped code I am using for IE7 only (minus all the php browser detection, etc):

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	.forgroundcontent {
	/*position:relative;*/
	}
	.backgroundcontent {
	display:none;
	}
	html {	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='themes/Milo/style/backgrounds/rotator.php', sizingMethod='scale');
	}
</style>

</head>

<body>
<div class="forgroundcontent"></div>
<img class="backgroundcontent" src="themes/Milo/style/backgrounds/rotator.php" />
</body>
</html>

**nevdawg** · 08-16-2007, 06:49 PM

problem solved. Apparently I needed this at the top of my page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Could anyone tell me why I needed that? Thanks!

**naiani** · 08-16-2007, 07:12 PM

Because it's a XHTML document, and XHTML documents need to have a DTD.
http://www.w3schools.com/xhtml/xhtml_dtd.asp

-----

EDIT: Just to complement, if you don't know how to distinguish if the document uses XHTML syntax, look for tags like <br /> instead of <br>, or in your case, <img ... />. This indicates closing for "single" tags.

**nevdawg** · 08-16-2007, 09:06 PM

Alright so now that is fixed. But it creates a second issue. Here is an example page I put up to help explain: http://possenetwork.byethost11.com/test/test.html
(in order for you to see it, you must be using IE)

When there is white behind the URLs, they are clickable.
But if you resize your browser to have the black part of the bomb over the URLs, they become unclickable.

This creates a big problem for my website. Does anyone know any solutions for this?

**BosseP** · 10-25-2007, 04:13 AM

I have been using this since 1998 so it is pretty well tested and I think pretty much cross browser. If not feel free to work on it!

<SCRIPT language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "images/backsmall.jpg";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<div id=elBGim"
+ " style='position:absolute;left:0;top:0;z-index:-1'>"
+ "<img name='imBG' border='0' src="+imSRC;
if (scaleWidth) imStr += " width="+winWid;
if (scaleHeight) imStr += " height="+winHgt;
imStr += "></div>";
document.write(imStr);}
makeIm();
</SCRIPT>
You can see it live on www.tierrarica.com

All the best

BosseP

Thread: Scalable Background Images

Thread Tools

Search Thread

Scalable Background Images

I have an old script that might be interesting take a look

Bookmarks

Bookmarks

Posting Permissions