Question

我一直在尝试使用CSS3在HTML页面上实现某种外观（采用基础框架的宝贝步骤）。我希望主要内容侧面是重复的背景图像（有点像这个公开的例子：public site - 即博主的内容被他的图像“包围”。这是我的app.css文件：

body { 
  background: url('../img/TCBlogo-beta.jpg');
}

我的图片是388像素x 261像素： image for my test

这是我的home.html（重复的jpg文件并非“侧翼”每侧的div;它“覆盖”内容）：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
    <div class="large-4 columns">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
    </div>
  <div class="large-4 columns">
      <h1>Welcome to my site</h1>
  </div>
  <div class="large-4 columns ">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
  </div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
</body>
</html>

1

Answer 1

在您的CSS中，width:***px;是您想要“白色div”的所需宽度（<1}}：

body{background-color:yellow;}
.row{width:***px;margin:0 auto;background-color:white;}

有关示例，请参阅此JSFiddle。

如何使用css3重复居中主要内容周围的背景图像

1 个答案: