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. Java基础毕向东day02

    1. 常量 null 等特殊 2.标识符 数字-字母-下划线,数字不能开头 3.二进制 1> 二进制计算方法. 2>常用二进制. 1        1      0       0   1 ...

  2. 2016 - 1- 22 NSURLConnetction --- POST请求

    一:与上一篇博客中的GET方法类似  只不过需要多注意,如果要改变请求的类型,需要生成NSMutableURLRequest对象才可以设置请求的类型. NSURL *url = [NSURL URLW ...

  3. 12-26 tableView的学习心得

    一:基础部分 UITableView的两种样式: 注意是只读的 1.UITableViewStytlePlain(不分组的) n 2.UITableViewStyleGrouped(分组的) 二:如何 ...

  4. Interview----判断整数序列是否是二叉搜索树的后序遍历结果

    题目:输入一个整数数组,判断该数组是不是某二元查找树的后序遍历的结果. 如果是返回true,否则返回false. 例如输入5.7.6.9.11.10.8,由于这一整数序列是如下树的后序遍历结果:   ...

  5. Juniper SRX防火墙-NAT学习笔记!

    Junos NAT第一部分:SRX NAT介绍第二部分:Source NAT:Interface NAT第三部分:Source NAT:Address Pools第四部分:Destination NA ...

  6. magento安装以及搬家的注意事项

    如果你的空间可以用ssh的话,你可以在官网的wiki Moving Magento To Another Server 中看到较为详细的搬家过程. 无论你的服务器是linux系统还是windows系统 ...

  7. Objective-C--- 多态 、 协议

    1 编写交通工具程序 1.1 问题 本案例需要创建一个TRTransportation类,类中有一个方法叫print的方法,该方法默认输出 “显示交通工具信息”,这个类作为父类,派生出三个子类TRTa ...

  8. Qt4升级到Qt5

    QtWidgets作为一个独立的模块 例如编译时错误 error: QMainWindow: No such file or directory error: QToolButton: No such ...

  9. LeetCode Binary Tree Paths(简单题)

    题意: 给出一个二叉树,输出根到所有叶子节点的路径. 思路: 直接DFS一次,只需要判断是否到达了叶子,是就收集答案. /** * Definition for a binary tree node. ...

  10. 前端学习资源(js)

    JavaScript JavaScript | MDN JavaScript 秘密花园 JavaScript 标准参考教程(alpha) 给 JavaScript 初心者的 ES2015 实战 Col ...