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. 面向对象之prototype，__proto__

    var person = function(name) { this.name = name }; person.prototype.getName = function() { return thi ...

  2. 打印的infoplist文件

    Printing description of dict: { CFBundleDevelopmentRegion = en; CFBundleExecutable = yybjproject; CF ...

  3. C#基础--面向过程计算器

    //面向过程计算器 //思路: 需要注意的是: 两个数相除 除数不能为0: //1.提示用户输入 //2.进行运算 //3.得到结果 Console.WriteLine("请输入第一个数字: ...

  4. kali linux karmetasploit配置

    原理分析:http://www.freebuf.com/articles/77055.html 转官方说明:https://www.offensive-security.com/metasploit- ...

  5. 如何通过 GT 快速开始性能测试？

    http://gt.tencent.com/docs/a/2.1/GTAndroidQuickStart.pdf Summary 安装 GT(GT.apk)后,不需要连接 PC 和在被测应用中插入代码 ...

  6. 您不能在64-位可执行文件上设置DEP属性？

    我是为dllhost.exe设置DEP时遇到了同样的情况.你需要选择64位系统对应的程序.64位系统:C:\Windows\SysWOW64\dllhost.exe32位系统:C:\Windows\S ...

  7. win7下环境搭建

    1.Python下载 https://www.python.org/downloads/windows/ 选择需要安装的版本,我偷懒装的可执行文件. 下载之后双击安装就OK啦,安装过程中有一项偷懒的选 ...

  8. JS-OC通信之Cordova简介

    Cordova 是一个可以让 JS 与原生代码(包括 Android 的 java,iOS 的 Objective-C 等)互相通信的一个库,并且提供了一系列的插件类,比如 JS 直接操作本地数据库的 ...

  9. Minimum Inversion Number_线段树||树状数组

    Problem Description The inversion number of a given number sequence a1, a2, ..., an is the number of ...

  10. JSOI地铁换票 （贪心）

    简单贪心即可. ..] of longint; var a,b:arr; i,n,m,sum:longint; procedure sort(var a:arr;l,r: longint); var ...