html - 如何垂直制作瓷砖？

Question

我需要为网站制作背景覆盖整个屏幕，但垂直平铺。我不能使用 HTML5。这是网站，抱歉代码很乱我几年前写了原始代码，当时我不知道如何正确组织代码。

Answer 1

使用带有 repeat-y 选项的 CSS background-image 的问题是图像不会填满屏幕的宽度。

要使图像填充宽度并垂直平铺，请执行以下操作。我已经测试过了，它可以工作。

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 背景（在 Firefox 11 和 Chrome 中测试）

浏览器支持

• Firefox 4+（如果包含 3.6 -moz-background-size）
• Safari 4.1+（如果包含 3.0 -webkit-background-size）
• 铬合金
• 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;
}