body {

    /* 加载背景图 */
background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图垂直、水平均居中 */
background-position: center center; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed; /* 让背景图基于容器大小伸缩 */
background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */

   background-color: rgba(41, 50, 39, 1);

}

将table-cell的display设置为inline-block  就可以给该元素设置margin

css - 背景图片充满整个屏幕的更多相关文章

  1. css背景图片充满DIV

    最近接手前端页面,让给调样式.哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一. 页面上 ...

  2. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  3. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  4. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  5. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  6. 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  7. 【转】链接伪类(:hover)CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  8. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  9. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

随机推荐

  1. pThreads线程(一) 基本API

    1.创建线程  int pthread_create(pthread_t *restrict_ptid,              const pthread_attr_t *restrict_att ...

  2. Jquery+asp.net实现Ajax方式文件下载实例代码

    如果文件中,需要下载一个文件,一般用超级链接的方式即可. 但是如果是图片,浏览器会默认打开图片浏览,不是实现下载. 考虑可以使用jquery ajax提交form请求的方式. jquery downl ...

  3. mybatis逆向工程之maven工程

    maven工程与动态web工程存在差异,不过大体是相同的 注意:运行成功后记得refresh刷新下,否则看不到 一.在pom文件中进行如下配置 <project xmlns="http ...

  4. 基于SaaS的企业数据隐私保护平台

    导读 WireWheel成立于2016年,总部位于华盛顿,该公司致力于降低数据隐私保护合规能力建设的难度,帮助企业来应对复杂.严厉的法案.条例规定.2018年10月,公司获得了PSP Growth领投 ...

  5. AI 循环神经网络(RNN)

    循环神经网络(Recurrent Neural Network,简称RNN),通常用于处理序列数据.正如卷积神经网络通常用于处理网格数据(例如图像)一样. 1.展开计算图 输入.输出.记忆 权值 2. ...

  6. java 数据类型和运算符

    1.注释 单行注释:  //哈哈哈 多行注释: /* 啦啦啦 */ 文档注释: /**    */注释中包含一些说明性的文字及一些JavaDoc标签(后期写项目时,可以生成项目的API)        ...

  7. OpenStack中的虚拟机(/dev/mapper/centos-root)进行磁盘扩容

    一.虚拟机上先扩展分区: 二.centos系统root登入,新建分区 2.1 [fdisk -l] 最大分区为/dev/sda2,说明新创建的分区将会是sda3(在后面的步骤会进行选择) 2.2 输入 ...

  8. 使用odoo官方dockerfile 创建最新版镜像

    以odoo11.0为例 1.检出odoo/docker仓:git clone https://github.com/odoo/docker.git 2.打开目录 http://nightly.odoo ...

  9. Luogu P3953 逛公园

    不管怎么说,这都是一道十分神仙的NOIp题 你可以说它狗,但不可以否认它就是NOIp的难度 首先这道题很显然是道图论题还是一道图论三合一(最短路+拓扑+图上DP) 先考虑最短路,我们分别以\(1\)和 ...

  10. [Oracle]如何在Oracle中设置Event

    为了调查Oracle 的故障,可以通过设置event ,来了解详细的状况.方法如下: ■ 如果使用 SPFILE, =============To enable it: 1. Check the cu ...