全屏背景--CSS

全屏背景

不仅仅是简单的 background-size: cover 那么简单了，还需要进行小小的处理。先说说我希望实现的效果吧。我希望的效果是整个背景能够填充整个页面，并且在页面元素上下滚动的情况下，背景固定而不随着元素滚动。

放到往常我可能会这么写：

body,html{
  height: 100%;
}

body{
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

但是这样的话在移动端会出现比较严重的后果，那就是一旦页面元素的高度大于整个页面后，滚动页面元素的时候，背景也会随之而动。而且背景会被撑开。这不是我所希望的。

这里用到一个小技巧，用上 :before 的方法。

body:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

这个用上before的伪元素的方法是一个很有奇效的小技巧。大家不妨可以试试。这样的话在移动端也能完美实现背景固定而且显示全屏。