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. win10 mac地址修改器

    NoVirus Thanks MAC Address Changer NoVirus Thanks MAC Address Changer is yet another simple MAC addr ...

  2. (转)xcode5.0.2下国际化图文解说

    原文:http://blog.csdn.net/dragoncheng/article/details/6703311 xcode5.0.2下国际化图文解说         分类:           ...

  3. 2016 - 1 -17 GCD主队列与全局队列

    一:主队列 1.概念:每一个应用程序对应唯一一个主队列,直接GET即可:在多线程开发中,使用主队列更新UI dispatch_queue_t q = dispatch_get_main_queue() ...

  4. C++中的数组与指针

    数组与指针看起来很像 int a[] = {1, 2 ,3}; int *p = a; 如此,我们可以p[0], p[1], p[2] 看起来,与直接使用数组名没什么两样,但是看这段代码 sizeof ...

  5. IOS图片缩放

    1.自动缩放到指定大小 + (UIImage *)thumbnailWithImage:(UIImage *)image size:(CGSize)asize { UIImage *newimage; ...

  6. Some SQL basics

    1, Index An index is a set of data pointers stored on disk associated with a single table. The main ...

  7. 【LeetCode OJ】Valid Palindrome

    Problem Link: http://oj.leetcode.com/problems/valid-palindrome/ The following two conditions would s ...

  8. CodeForces 416D (贪心)

    Problem Population Size 题目大意 给一个长度为n的序列,由 -1 和正整数组成,-1表示任意的正整数. 将序列分成若干段,使得任意段都是等差数列,求最少段数. 解题分析 可以发 ...

  9. 【转】Web应用的组件化开发(二)

    原文转自:http://blog.jobbole.com/56170/ 管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程.从各种角度看 ...

  10. vim-airline的theme

    仓库位置: https://github.com/vim-airline/vim-airline-themes 这些内置的这些主题,可以直接使用,方法是在.vimrc中写 let g:airline_ ...