Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Image repeat itself horizontally?

    (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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!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/Ad...AddOutLine.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wow this new one works perfectly! YAY thanks! What was wrong exactly with the first one you posted?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •