[分享]css中如何让背景图片全屏

今天我们来讲一下如何让背景图片全屏显示，这个在网页制作中经常会用到。首先，我们得有一张背景图片，不然没有什么可以显示的。接下来，我们需要做的就是在样式表中给背景图片设置全屏属性。首先，我们需要设置bo...

今天我们来讲一下如何让背景图片全屏显示，这个在网页制作中经常会用到。首先，我们得有一张背景图片，不然没有什么可以显示的。接下来，我们需要做的就是在样式表中给背景图片设置全屏属性。
首先，我们需要设置body元素的高度和宽度都为100%：

body {
  height: 100%;
  width: 100%;
} 

接下来，我们再设置背景图片的属性，使用以下代码：

body {
  background: url('your-image.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} 

在上述代码中，我们把背景图片设置为覆盖整个页面，而不是显示在原始大小上。我们的代码涉及到几个CSS 3属性，分别是background-size, background-position, background-attachment.
另外需要注意的是，由于不同浏览器对CSS3的支持程度并不相同，所以在CSS代码中要添加一些前缀，比如上述代码中的-webkit、-moz、-o等前缀。
好了，通过上述代码就可以让背景图片全屏显示了。希望对你们有所帮助！