CSS让背景图适应整个屏幕（填满）

Peanutty

已于 2022-01-27 00:49:17 修改

阅读量1.8w

点赞数 13

分类专栏：项目相关前端基础Html CSS JS 文章标签： css css3 html

于 2022-01-17 23:23:05 首次发布

本文链接：https://blog.csdn.net/hhb442/article/details/122550783

版权

项目相关同时被 2 个专栏收录

17 篇文章

订阅专栏

前端基础Html CSS JS

9 篇文章

订阅专栏

本文介绍如何使用CSS设置背景图片以铺满整个屏幕，并确保图片不会重复显示。通过具体的代码示例，展示了如何调整背景图片的位置、尺寸及固定方式等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码如下

<body>

/*此处内容省略*/

</body>

使用css设置背景图片并且铺满整个屏幕（不重复），代码如下

body{
    /*设置背景图片*/
    background-image: url("../images/background/back.jpg") ;
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;  /*关键*/
    background-position: center;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1600px;
    z-index: -10;
    zoom:1;
}

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/9ce64877c601401dbde48aa6904e112f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUGVhbnV0dHk=,size_20,color_FFFFFF,t_70,g_s
e,x_16)