Swafnil
04-29-2003, 04:03 AM
This one could be complicated but I think it's not impossible.
I'd love to use an autostrechted fixed background to create 3D homepages, which should be possible in one way or another. I think that this hasn't been discussed before and could be really useful for some people.
I'll include the information I already gathered and will also add my comments and ideas.
------------------------------------------------------
1.) Let's start with autostretching images:
## Information can be found here:
## http://www.experts-exchange.com/Web/Graphics/Web_Images/Q_20526046.html
<html>
<style type="text/css">
#backPic {
z-Index:0;
display:block;
position:absolute;
display:block;
left:0%;
top:0%;
width:100%;
height:100%;
}
/* make it sticky in non MSIE 5/6 */
html>body #backPic {
position:fixed;
}
</style>
<script language="JScript">
<!-- /* MSIE only JScript !! */
function fixBgImage() {
if (document.all.backPic.style.setExpression) {
document.all.backPic.style.setExpression("height","document.all.tbl.offsetHeight");
document.recalc();
}
}
ie5 = (document.all && document.getElementById && !document.fireEvent)?true:false;
ie55= (document.all && document.fireEvent && !document.createComment)?true:false;
ie6 = (document.all && document.fireEvent && document.createComment)?true:false;
if (!window.opera && (ie5 || ie55 || ie6)) onload=fixBgImage;
// -->
</script>
<body>
<img src="someImage.jpg" id="backPic">
...
</body>
</html>
## this one autostreches the image with the id 'backPic'
## but it'll still scroll.
2.) This one allows non-scrolling background images in HTML elements other than HTML or BODY tags (which doesn't work in IE correctly - fixed by this script).
## (Information can be found here:
## http://doxdesk.com/software/js/fixed.html
<html>
<head>
<script type="text/javascript" src="fixed.js"></script>
</head>
<body>
...
</body>
</html>
## this script uses javascript to fire actions on several
## events like resizing or scrolling, thus making IE refresh
## the entire page. Browsers like Mozilla won't execute the
## script, they are already able to display everything
## correctly
## content of fixed.js:
## see http://doxdesk.com/file/software/js/fixed.js
## so that's it! Now how would I combine these to have my
## autostretched non-scrolling background image?
## Thanks in advance for your ideas, hints, hacks and
## comments!
##
## Sascha
I'd love to use an autostrechted fixed background to create 3D homepages, which should be possible in one way or another. I think that this hasn't been discussed before and could be really useful for some people.
I'll include the information I already gathered and will also add my comments and ideas.
------------------------------------------------------
1.) Let's start with autostretching images:
## Information can be found here:
## http://www.experts-exchange.com/Web/Graphics/Web_Images/Q_20526046.html
<html>
<style type="text/css">
#backPic {
z-Index:0;
display:block;
position:absolute;
display:block;
left:0%;
top:0%;
width:100%;
height:100%;
}
/* make it sticky in non MSIE 5/6 */
html>body #backPic {
position:fixed;
}
</style>
<script language="JScript">
<!-- /* MSIE only JScript !! */
function fixBgImage() {
if (document.all.backPic.style.setExpression) {
document.all.backPic.style.setExpression("height","document.all.tbl.offsetHeight");
document.recalc();
}
}
ie5 = (document.all && document.getElementById && !document.fireEvent)?true:false;
ie55= (document.all && document.fireEvent && !document.createComment)?true:false;
ie6 = (document.all && document.fireEvent && document.createComment)?true:false;
if (!window.opera && (ie5 || ie55 || ie6)) onload=fixBgImage;
// -->
</script>
<body>
<img src="someImage.jpg" id="backPic">
...
</body>
</html>
## this one autostreches the image with the id 'backPic'
## but it'll still scroll.
2.) This one allows non-scrolling background images in HTML elements other than HTML or BODY tags (which doesn't work in IE correctly - fixed by this script).
## (Information can be found here:
## http://doxdesk.com/software/js/fixed.html
<html>
<head>
<script type="text/javascript" src="fixed.js"></script>
</head>
<body>
...
</body>
</html>
## this script uses javascript to fire actions on several
## events like resizing or scrolling, thus making IE refresh
## the entire page. Browsers like Mozilla won't execute the
## script, they are already able to display everything
## correctly
## content of fixed.js:
## see http://doxdesk.com/file/software/js/fixed.js
## so that's it! Now how would I combine these to have my
## autostretched non-scrolling background image?
## Thanks in advance for your ideas, hints, hacks and
## comments!
##
## Sascha