Question

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

Answer 1

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

要使图像填充宽度并垂直ALSO，请执行以下操作。我已经过测试，但它确实有效。

删除包含背景图片的当前<div class="background">块

将以下代码块添加到您页面上的<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

现在添加/修改以下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;
}

工作示例

Horizontal Stretch + Vertical Repeat Base64 Background（在Firefox 11和Chrome中测试）

浏览器支持

Firefox 4+（如果包含-moz-background-size，则为3.6）
Safari 4.1+（如果包含-webkit-background-size，则为3.0）
铬
Opera 10+（如果包含-o-background-size，则为9.5）
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;
}

如何垂直制作<img/>图块？

3 个答案:

工作示例

浏览器支持