...

View Full Version : Image repeat itself horizontally?



Sonjaaa
08-29-2006, 08:28 PM
(I posted this in HTML and CSS already, but I fear it may not be possible in pure HTML or CSS.)

How do I make an image repeat itself horizontally only until the end of the screen? I don't want to make it a background image, because I want this image to print out and look good in print format, where it should also repeat itself horizontally until end of page. It's for a sort of banner/border.

I'm stumped, but surely there must be a solution!

Sonja

vwphillips
08-29-2006, 09:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function zxcBdyWH(){
if (document.body.scrollHeight > document.body.offsetHeight){ return [document.body.scrollWidth,document.body.scrollHeight]; }
return [document.body.offsetWidth,document.body.offsetHeight];
}

function Init(id){
var img=document.getElementById(id);
img.removeAttribute('id');
for (var zxc0=0;zxc0<Math.floor(zxcBdyWH()[0]/img.width-1);zxc0++){
img.parentNode.appendChild(img.cloneNode(false));
}
}
//-->
</script></head>

<body onload="Init('Img1');">
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
<br>
http://www.vicsjavascripts.org.uk/AddOutLine/AddOutLine.htm

</body>

</html>



also see
http://www.vicsjavascripts.org.uk/AddOutLine/AddOutLine.htm

Sonjaaa
08-29-2006, 09:33 PM
Thanks! I tried the code, but it doesn't work well on my end. It puts the extra images at inconvenient locations, and sometimes it wraps around and keeps adding more.

vwphillips
08-29-2006, 11:04 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Init(id){
var img=document.getElementById(id);
img.removeAttribute('id');
for (var zxc0=0;zxc0<20;zxc0++){
img.parentNode.appendChild(img.cloneNode(false));
}
img.parentNode.removeChild(img);
}
//-->
</script></head>

<body onload="Init('Img1');">
<div style="overflow:hidden;width:100%;height:100px;" >
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
</div>
<br>


</body>

</html>

Sonjaaa
08-30-2006, 07:55 PM
Wow this new one works perfectly! YAY thanks! What was wrong exactly with the first one you posted?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum