Как сделать плитку <img>по вертикали?

Question

Мне нужно сделать фон для сайта, охватывающий весь экран, НО плитку вертикально.Я не могу использовать HTML5. Вот сайт, извините, код неопрятен Я написал оригинальный код несколько лет назад, когда не знал, как правильно организовать код.

Answer 1

проблема с использованием CSS background-image с параметром repeat-y заключается в том, что изображение не будет занимать всю ширину экрана.

Чтобы получить изображение, чтобы заполнить ширину, а ТАКЖЕ мозаику сделать вертикальноследующие.Я протестировал, и это работает.

1. Удалите текущий <div class="background"> блок, содержащий ваши фоновые изображения

2. Добавьте следующий блок кода в<center> элемент, который вы имеете на своей странице

   <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. теперь добавьте / измените следующие операторы CSS

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

Вот решение, которое, я считаю, именно то, что вы ищете.Вы также можете использовать длину (например, 50px) вместо auto для высоты.

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

Рабочий пример

• Горизонтальное растяжение + вертикальное повторениеBase64 Background (протестировано в Firefox 11 и Chrome)

Поддержка браузеров

• Firefox 4+ (3,6, если включить -moz-background-size)
• Safari 4.1+ (3.0, если вы включите -webkit-background-size)
• Chrome
• Opera 10+ (9.5, если вы включите -o-background-size)
• Internet Explorer 9+ (нефон для IE8 и ниже)

Answer 3

В вашем CSS используйте background-repeat: repeat-y для повторения по вертикали. Используйте background-repeat: repeat, чтобы повторять по вертикали и горизонтали.

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

CSS

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