背景图片100%铺满
时间: 2023-07-23 16:05:50 浏览: 38
要让背景图片100%铺满,可以使用CSS属性background-size: cover;。这个属性会自动调整背景图片的大小,使其完全覆盖背景区域,并保持图片的宽高比。例如:
```
body {
background-image: url('background.jpg');
background-size: cover;
}
```
这样就可以让背景图片铺满整个页面了。需要注意的是,如果图片的宽高比与屏幕的宽高比不同,有可能会出现部分图片被裁剪的情况。
相关问题
css背景图片不自动铺满
如果背景图片不能自动铺满,可以通过CSS的`background-size`属性来设置背景图片的大小,具体的属性值有以下几种:
- `auto` : 默认值,保持背景图像的原始大小。
- `cover` : 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- `contain` : 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
- `100% 100%` : 让背景图像始终铺满背景区域。
例如,要让背景图片自动铺满,可以设置`background-size: 100% 100%;`。如果背景图片的尺寸和背景区域的尺寸不同,可以使用`background-size: cover;`或`background-size: contain;`来适应背景区域。
css 背景图片铺满
可以使用CSS的background-size属性来实现背景图片铺满整个屏幕。具体的代码如下:
```css
body {
background-image: url("../images/background/back.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
这段代码中,我们将背景图片指定为URL("../images/background/back.jpg"),并使用background-size属性设置图片大小为cover,保证图片能够铺满整个屏幕。同时,我们使用background-repeat属性设置图片不重复,background-attachment属性固定背景图片,background-position属性设置图片位置为居中。最后,我们设置body元素的宽度和高度为100%,确保背景图片铺满整个屏幕。