码云笔记前端博客
Home > HTML/CSS > CSS 实现让body背景图片自适应全屏

CSS 实现让body背景图片自适应全屏

2019-10-25 分类:HTML/CSS 作者:管理员 阅读(116)

本文共计762个字,阅读时间预计2分钟,干货满满,记得点赞加收藏哦

最近在整公司登录页背景时,需要为body设置全屏背景图片,如何让body的背景图片自适应整个屏,让然使用background相关属性了。

简单介绍一下接下来要用到的background属性知识。

  • url(images/beijing.png)——图片路径的位置;
  • no-repeat—— 图片不重复;
  • center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;
  • background-position: center 0——就是图片的定位,同上;
  • background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;
  • min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。

实战代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
    width:100%;
        height: 100%;
    background: url(../image/sso_bg.png);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色,背景图加载过程中会显示背景色 */
    background-color: #464646;
}

CSS 实现让body背景图片自适应全屏
以上所述是码云笔记给大家介绍的css设置body背景图片满屏的实例代码,希望对大家有所帮助。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(10) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
10

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - CSS 实现让body背景图片自适应全屏

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648129 次
  • 最近更新: 2019年11月21日