How to make a <img> tile vertically?

Oztaco - Reinstate Monica C. picture Oztaco - Reinstate Monica C. · Apr 3, 2012 · Viewed 7.1k times · Source

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

OACDesigns picture OACDesigns · Apr 3, 2012

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