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. SharePoint 2013 开发——发布SharePoint应用程序

    博客地址:http://blog.csdn.net/FoxDave 前几篇我们介绍了开发.部署和调试SharePoint应用程序的基础,本篇介绍更实用的操作,当我们开发一个SharePoint应用 ...

  2. 按Right-BICEP要求的任务二的测试

    测试方法:Right-BICEP 测试计划: 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.P-是否满足性能要求? 4.是否有乘除法? 5.是否有括号? 6.是否有输出方 ...

  3. xcode插件种类

    古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战斗力的绝佳途径!以下是搜集的一些有力的XCode插件.   1.全能搜索家CodePilot 2.0 你要找的是文件?是文件夹? ...

  4. 云计算平台简介(App Engine)

    云计算平台简介(App Engine)     1   简介 App Engine: 应用程序引擎,是托管网络应用程序的云计算平台. 1.1  什么是云 云计算通常简称为“云”,是一种通过 Inter ...

  5. 极客DIY:开源WiFi智能手表制作

    如果你喜欢拥有一款属于自己的无线手表,那么请不要错过,相信阅读完这篇文章对你会很有帮助. 硬件规格 ESP8266(32Mbit闪存) MPU-9250(陀螺仪传感器)以及 AK8963(内置磁力计) ...

  6. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  7. ERP登录(八)

    登录的存储过程: ALTER PROCEDURE [dbo].[UserLogin] @userid int output, @LoginName nvarchar(50), @Password nv ...

  8. Smart210学习记录----beep linux字符设备驱动

    今天搞定了beep linux字符设备驱动,心里还是很开心的,哈哈...但在完成的过程中却遇到了一个非常棘手的问题,花费了我大量的时间,,,, 还是把问题描述一下吧,好像这个问题很普遍的,网上许多解决 ...

  9. Magento速度优化

    一.Magento Compiler可以提高 25% 到 50% 速度 Magento的性能一直是大家比较关心的焦点,现在Magento最新的版本 1.3.2.2 增加了 Magento Compil ...

  10. Tomcat9源码编译及导入Eclipse(转)

    1.下载tomcat源码.建议下载最新版本tomcat9. svn地址:http://svn.apache.org/repos/asf/tomcat/tc9.0.x/branches/gsoc-jas ...