css背景图片铺满整个页面
时间: 2023-06-05 21:47:26 浏览: 333
背景图片铺满全屏
想要让CSS背景图片铺满整个页面,可以使用下列代码:
```
body {
background-image: url("your-image.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
```
其中,`background-image`是要使用的图片路径,`background-size`指定图片的大小,这里使用`cover`让图片完全覆盖整个页面。`background-position`指定图片的位置,这里使用`center`让图片居中。`background-repeat`指定图片是否重复,这里使用`no-repeat`让图片不重复。
如果想要让固定的页面元素(例如头部导航栏)不受背景图片影响,可以将上述代码应用在类似下面这样的`div`中:
```
.background {
background-image: url("your-image.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
```
然后将需要不受影响的元素放在另一个`div`里面,比如:
```
<div class="background">
<div class="navbar">
<!-- 头部导航栏内容 -->
</div>
</div>
```
这样一来,头部导航栏就可以正常地显示在页面上,而背景图片仍然可以覆盖整个页面。
阅读全文