How to make a <img> tile vertically?

Question

I need to make a background for a website cover the entire screen, BUT tile vertically. I cant use HTML5. Here is the website, sorry the code is messy I wrote the original code a few years back when I didnt know how to right organized code.

Answer 1

the problem with using CSS background-image with the repeat-y option is that the image won't fill the width of the screen.

To get the image to fill the width and ALSO tile vertically do the following. I've tested and it works.

1. Remove the current <div class="background"> block containing your background images

2. Add the following code block to the <center> element you have on your page

   <center style="">
       <div class="background">
           <img src="BG/b1.jpg" />
           <img src="BG/b1.jpg" />
           <img src="BG/b1.jpg" />
       </div>
   
       ...rest of code
   

3. now add/modify the following CSS statements

center
{
  position:relative;
}
.background 
{
  height:100%;
  width:100%;
  min-height:800px;
  min-width:760px;
  position:absolute;
  overflow:hidden;
  left:0px;
  top:0px;
  z-index:-1;
}
.background img
{
  display:block;
  height:auto;
  width:100%;
  min-height: 800px;
  min-width:760px;
}

Answer 2

Here's a solution that I believe is what you're looking for. You can also use a length (e.g., 50px) instead of auto for the height.

#background {
 background-image:url("image.png");
 background-size:100% auto;
 background-repeat:repeat-y;
}

Working Example

• Horizontal Stretch + Vertical Repeat Base64 Background (tested in Firefox 11 and Chrome)

Browser Support

• Firefox 4+ (3.6 if you include -moz-background-size)
• Safari 4.1+ (3.0 if you include -webkit-background-size)
• Chrome
• Opera 10+ (9.5 if you include -o-background-size)
• Internet Explorer 9+ (non-resized background for IE8 and lower)

Answer 3

In your CSS use background-repeat:repeat-y to repeat vertically. Use background-repeat:repeat to repeat vertically and horizonally.

http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS

body
{
    background-image:url('paper.gif');
    background-repeat:repeat-y;
}