背景图片居中CSS如下

background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat center center;

我遇到的问题是

水平居中没问题,但是垂直居中失效,紧贴顶部未居中。

最后发现

需要给html或者body设置高度百分百,代码如下

html
{
height: 100%;
}

这样就好了,完全居中,左右也居中,上下也居中,完美,效果如下。

CSS背景图片垂直居中center不起效果完美解决的更多相关文章

  1. CSS背景图片定位

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

  2. Bootstrap css背景图片的设置

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

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

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

  4. css背景图片位置:background的position(转)

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

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

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

  6. div css背景图片不显示

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

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

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

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

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

  9. css背景图片拉伸

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

随机推荐

  1. 利用Google翻译成多国语言的见解

    1.首先注意,英语句子中的 第一个单词的首字母要大写, 2.句子结尾了,要用句号. 3.英语中单词和前面的标点符号要留一个空格,如:  you.Are   应该是 you. Are you..... ...

  2. 深入JVM学习心得

    前言 相信很多人和我一样长期使用java编程,却很少关注过JVM底层实现,这很大程度上是因为JVM设计的很精巧,因此平时项目也很少遇到涉及JVM的问题.但是一方面出于对java底层技术的好奇,另一方面 ...

  3. mysql/mariadb 数据库配置

    1.  启动mariadb systemctl start mariadb 2. 设置开机启动mariadb systemctl enable mariadb 一.修改用户密码,以root为例 1. ...

  4. Head First Python学习笔记3——持久存储

    经过上几章的学习,完成如下任务:读取一个文本文件里的内容,将每一行的内容按“:”分割成两部分,根据分割出第一项判断并分别放入两个列表里,去除首尾空白,在屏幕上打印. # 两个列表用于存储数据man=[ ...

  5. [日常] MySQL的哈希索引和原理研究测试

    1.哈希索引 :(hash index)基于哈希表实现,只有精确匹配到索引列的查询,才会起到效果.对于每一行数据,存储引擎都会对所有的索引列计算出一个哈希码(hash code),哈希码是一个较小的整 ...

  6. VS2015编译OpenSSL

    概述 OpenSSL 是一个开源的第三方库,它实现了 SSL(Secure SocketLayer)和 TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的 ...

  7. 关于jquery的入门,简单的封装。

    看过不同的博客,觉得以下的博客写的比较简洁明了,通俗易懂. 关于jquery博客:http://www.cnblogs.com/moqiutao/p/6523924.html 关于js:http:// ...

  8. Java的工厂模式(一)

    Java的工厂模式在框架中是用的到很多的,所谓的工厂模式,其实也就是用一个接口来创建对象,把实例化的工作推迟到子类去实现.这样在主函数中就可以直接创建一个工厂类,再通过这个工厂类实现操作. 假设有一个 ...

  9. Maven 项目管理从未如此通畅

    一,写在前面 Maven到底是什么?它能做些什么?能为我们的开发工作提供什么样的帮助?为什么会有如此大的知名度?另外,常听大厂的人说“私服”,工具管理吧啦吧啦的一堆也是不明觉厉.相信仁者见仁,着智者见 ...

  10. Linux学习7-Linux常用命令(3)

    文件处理命令         命令名称:touch 命令英文原意:touch 命令所在路径:/bin/touch 执行权限:所有用户 功能描述:创建空文件 语法:touch[文件名] 范例: $tou ...