背景图片居中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. antlr提取代码注释

    1. 来由 为什么要写提取注释呢,起因是工作需要.弄这么个不太重要的功能点来讲,旨在抛砖引玉. 一般而言,大家使用antlr解析源代码的时候,不会关心注释和空格之类内容,默认会过滤掉,不会放到语法树里 ...

  2. 红色警戒3原版V1.00基址大全

    127.0.0.1 servserv.generals.ea.com ===================================1.04 基址变化 00DFBD74=>DFCDF4 ...

  3. Ubuntu18.0.4查看显示器型号

    在官网https://launchpad.net/ubuntu/+source/xresprobe下载二进制包,apt-get目前无法安装xresprobe 输入命令sudo ddcprobe 得到如 ...

  4. unity游戏开发之entitas框架

    框架介绍 entitas是一个超快.超轻量的c# Entity-Component-System (ECS)框架,专门为Unity引擎设计.提供内部缓存和高速的组件访问,经过精心设计,可以在垃圾收集环 ...

  5. Java8常用新特性实践

    前言: 时下Oracle开速迭代的Java社区以即将推出Java10,但尴尬的是不少小中企业仍使用JDK7甚至JDK6开发. 从上面列出的JDK8特性中我们可以发现Java8的部分特性很明显的是从Sc ...

  6. [日常] 编写HTTP接口文档

    一.什么是接口文档?在项目开发中,web项目的前后端分离开发,APP开发,需要由前后端工程师共同定义接口,编写接口文档,之后大家都根据这个接口文档进行开发,到项目结束前都要一直维护.二.为什么要写接口 ...

  7. Spring Boot学习笔记(六)mybatis配置多数据源

    application.properties #数据库配置 #数据源类型 spring.datasource.type=com.alibaba.druid.pool.DruidDataSource # ...

  8. 悟空模式-java设计模式

    目前已定义的java设计模式细分下来有二十余种,这篇博客主要是想从大家所熟知的孙悟空入手,阐述各个设计模式的概念和优缺点,以及他们之间的联系. 在下面介绍的每个设计模式里,都会有与西游记相关的具体案例 ...

  9. IDEA 中edit configurations加号找不到tomcat server

    前言:在本机 idea 中搭建 springMVC 项目,正准备配置 Tomcat 时,发现没有 tomcat server 选项,而我的 idea 是有这个插件的,所以解决问题的方案应该是另一个地方 ...

  10. LOJ#6491. zrq 学反演(莫比乌斯反演 杜教筛)

    题意 题目链接 Sol 反演套路题? 不过最后一步还是挺妙的. 套路枚举\(d\),化简可以得到 \[\sum_{T = 1}^m (\frac{M}{T})^n \sum_{d \ | T} d \ ...