How to make a <img> tile vertically? - html

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.
Remove the current <div class="background"> block containing your background images
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
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

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;
}

Answer 3

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)