特殊页面背景 - 静态、平铺

Question

好吧，假设我有一个像本网站一样的冷却平铺背景。 http://www.leeslights.com/colors-shapes-sizes-and-prices.html
我将如何使图像平铺到浏览器，但一旦完成，它就会变成静态的，就像背景是这个网站一样。 http://www.worshipatthemountaintop.org/

Answer 1

我认为最简单的解决方案是为具有固定位置和完整视图大小的页面背景创建一个单独的 div。这是一个Pen

HTML:

<div class="background"></div>
<div class="content">
  <h1>Lorem ipsum dolor sit.</h1>
  <p>Lorem ipsum dolor sit amet.</p>
  <!-- and any other page content -->
</div>

CSS:

div.background {
  position: fixed;
  top: 0;
  z-index: -100;
  background-image: url("http://lorempixel.com/200/200/abstract/6/");
  background-size: tiled;
  width: 100%;
  height: 100vh;
}

内容的一些样式：

div.content {
  background: white;
  width: 80%;
  padding: 20px;
  margin: 40px auto 60px auto;
}

Answer 2

下面的代码可以工作，它可以在平铺星图网站上工作，只需将括号中的内容替换为您自己的图像即可

background:url('ewExternalFiles/space_bg.gif')repeat fixed center;

特殊页面背景 - 静态、平铺

Special Page Background - Static, Tiled

css

html

static

background-image

tile