var viewport = Ext.create('Ext.container.Viewport', {
style : 'background-image:url(login_bj.jpg);background-repeat: no-repeat;filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\')";-moz-background-size:100% 100%;background-size:100% 100%;',
layout : {
type : 'vbox',
align : 'center',
pack : 'center'
},
items : [loginForm]
});

只用添加一行代码(style)即可轻松实现背景图片铺满浏览器视图并自动伸缩。

效果图:

ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩的更多相关文章

  1. IE9以下通过css让html页面背景图片铺满整个屏幕

    第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...

  2. css 设置背景图片铺满固定不动

    #page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...

  3. css 背景图片铺满

    body { width: 100%; height: 100%; background: url(img/loginbg.png); background-size: 100% 100%; back ...

  4. css 设置body背景图片铺满

    background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; backg ...

  5. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  6. Unity2D 背景图铺满与Camera.Size的计算公式

    在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...

  7. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

  8. 移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat

    1.  效果: 浏览器: 手机模拟: 2.代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. html始终让元素居中显示,背景图铺满随便拖动不出界

    首先.写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Cont ...

随机推荐

  1. Javascript基础--类与对象(五)

    js面向(基于)对象编程1.澄清概念 1.1 js中基于对象 == js 面向对象 1.2 js中没有类class,但是它取了一个新的名字,交原型对象,因此 类 = 原型对象. 2.为什么需要对象? ...

  2. 04-树5 Complete Binary Search Tree

    这题也是第二次做,本想第一次做时参考的算法会和老师讲的一样,不想老师讲的算法用在这题感觉还不如思雪园友的算法(http://www.cnblogs.com/sixue/archive/2015/04. ...

  3. solaris下的常用命令

    屏幕显示: cat输出到屏幕: more 整屏显示,b显示上一屏,f显示下一屏: head显示文件的前n行: tail显示文件的后n行: man查看命令帮助: 目录操作: 创建目录: mkdir,   ...

  4. 谈谈你对http的理解

    一.先看一张图: 二.要client与sever能沟通 1.需要一样的规则,遵循一定的规范-----------协议 好比:不同国家的人,需要一门通用的语言. 2.谈到协议------http---- ...

  5. javascript笔记3-面向对象的程序设计-创建对象

    javascript的对象:无序属性的集合,而每个属性可以包含基本值.对象或者函数.举例: var person = new Object(); person.name = "Nichola ...

  6. 极客DIY:如何构建一台属于自己的基站

    写在前面(原文作者) 上周我去特拉维夫(Tel Aviv)探望我的朋友结果有了一些收获,一块崭新的BladeRF(x40),即一个支持USB3.0的SDR平台,这就意味着可以同时发送和接收信息了.而H ...

  7. Python 安全类目推荐 (持续更新)

    推荐学习书目 › Learn Python the Hard Way › Python 学习手册 › Python Cookbook › Python 基础教程 Python Sites › PyPI ...

  8. Emacs和Ultra Edit列编辑模式

    在emacs中可以使用C-r系列组合键进行区域选择编辑,或者使用emacs自带的cua-mode,然后键入C-ret进行可视化列编辑. 使用Ultra Edit同样可以方便的进入列编辑模式,只需要按下 ...

  9. iOS 调用地图导航

    在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_LESS_THAN(v) ([[[UIDevice currentDevic ...

  10. Raising Modulo Numbers_快速幂取模算法

    Description People are different. Some secretly read magazines full of interesting girls' pictures, ...