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

Peanutty

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

阅读量1.6w

点赞数 12

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

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

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

版权

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

17 篇文章 4 订阅

订阅专栏

前端基础Html CSS JS

9 篇文章 0 订阅

订阅专栏

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)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Peanutty

关注关注

12
点赞
踩
60

收藏

觉得还不错? 一键收藏
3
评论
CSS让背景图适应整个屏幕（填满）

html代码如下<body>/*此处内容省略*/</body>使用css设置背景图片并且铺满整个屏幕（不重复），代码如下body{ /*设置背景图片*/ background-image: url("../images/background/back.jpg") ; background-size: 100% 100%; background-size: cover; background-repeat: no-repe.
复制链接

扫一扫