Question

注意：重复，重复-x，重复-y所有这些都无法正常工作。

所以我有以下HTML＆amp; CSS代码。我尝试了很多方法，但无法开始工作。我想重复的图片是XYZ.png。

<html>
<head>
<title>IOP</title>
<style>
body > header {
  background : url("a.png") repeat-x scroll 0 0 transparent;
  box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
  width : 100% 
  position : relative;
  z-index : 10; 
  height: 57px; }
 #MAN {
  height:100%;
  padding : 30px 0 25px;
  background: url("XYZ.png") repeat ;
  }

</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>

我甚至尝试过高度：100％但这给了我一个滚动条。

的问候，
网民

Answer 1

试试这个：

    <html>
<head>
<title>IOP</title>
<style>
body > header {
  background : url("a.png") repeat-x scroll 0 0 transparent;
  box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
  width : 100% 
  position : relative;
  z-index : 10; 
  height: 57px; }
 #MAN {
  height:500px;
  width: 500px;
  padding : 30px 0 25px;
  background: url("XYZ.png") repeat ;
  }

</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>

将宽度和高度添加到#MAN（以像素为单位）。通常高度和宽度100％将采取其parrent的大小。尝试使用widht 960px的包装器div，然后在内包装器中，每个宽度为100％的元素将采用960px的宽度。这是我的头没有测试过的比赛。希望它没问题。几个月来我没有写过任何html css :(

Answer 2

如果它区分大小写，那么已经尝试了吗？

<html>
<head>
<title>IOP</title>
<style type="text/css">
body > header {
  background : url("a.png") repeat-x scroll 0 0 transparent;
  box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
  width : 100% 
  position : relative;
  z-index : 10; 
  height: 57px; 
}
 /* case sensitive? ----> */ #man {
  height:100%;
  padding : 30px 0 25px;
  background: url("XYZ.png") repeat ;
  }

</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>

Answer 3

为什么不这样做：

body { background: url(XYZ.png); }

请参阅：http://jsfiddle.net/Wexcode/Chb33/

编辑：您可能无法正确引用图像。请参阅下面的评论。

如何垂直重复图像＆amp;水平？

3 个答案: