diff --git a/src/app/theme/baCard/baCardBlur.directive.ts b/src/app/theme/baCard/baCardBlur.directive.ts
new file mode 100644
index 00000000..bbdf3cb2
--- /dev/null
+++ b/src/app/theme/baCard/baCardBlur.directive.ts
@@ -0,0 +1,43 @@
+import {Directive, ElementRef, HostListener} from 'angular2/core';
+import {BaCardBlurHelper} from './baCardBlurHelper.service';
+
+import {BgMetrics} from './bgMetrics';
+
+@Directive({
+  selector: '[baCardBlur]',
+  providers: [BaCardBlurHelper]
+})
+export class BaCardBlur {
+  private _bodyBgSize:BgMetrics;
+
+  constructor(private _baCardBlurHelper:BaCardBlurHelper, private _el:ElementRef) {
+    this._getBodyImageSizesOnBgLoad();
+    this._recalculateCardStylesOnBgLoad();
+  }
+
+  @HostListener('window:resize')
+  _onWindowResize():void {
+    this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes();
+    this._recalculateCardStyle();
+  }
+
+  private _getBodyImageSizesOnBgLoad():void {
+    this._baCardBlurHelper.bodyBgLoad().subscribe(() => {
+      this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes();
+    });
+  }
+
+  private _recalculateCardStylesOnBgLoad():void {
+    this._baCardBlurHelper.bodyBgLoad().subscribe((event) => {
+      setTimeout(this._recalculateCardStyle.bind(this));
+    })
+  }
+
+  private _recalculateCardStyle():void {
+    if (!this._bodyBgSize) {
+      return;
+    }
+    this._el.nativeElement.style.backgroundSize = Math.round(this._bodyBgSize.width) + 'px ' + Math.round(this._bodyBgSize.height) + 'px';
+    this._el.nativeElement.style.backgroundPosition = Math.floor(this._bodyBgSize.positionX) + 'px ' + Math.floor(this._bodyBgSize.positionY) + 'px';
+  }
+}
diff --git a/src/app/theme/baCard/baCardBlurHelper.service.ts b/src/app/theme/baCard/baCardBlurHelper.service.ts
new file mode 100644
index 00000000..2893f7f1
--- /dev/null
+++ b/src/app/theme/baCard/baCardBlurHelper.service.ts
@@ -0,0 +1,54 @@
+import {Injectable} from 'angular2/core'
+import {BgMetrics} from './bgMetrics';
+import {Subject} from 'rxjs/Subject';
+
+@Injectable()
+export class BaCardBlurHelper {
+  private image:HTMLImageElement;
+  private imageLoadSubject:Subject<void>;
+
+  constructor() {
+    this._genBgImage();
+    this._genImageLoadSubject();
+  }
+
+  private _genBgImage():void {
+    this.image = new Image();
+    let computedStyle = getComputedStyle(document.body, ':before');
+    this.image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
+  }
+
+  private _genImageLoadSubject():void {
+    this.imageLoadSubject = new Subject<void>();
+    this.image.onerror = () => {
+      this.imageLoadSubject.error();
+      this.imageLoadSubject.complete();
+    };
+    this.image.onload = () => {
+      this.imageLoadSubject.next(null);
+      this.imageLoadSubject.complete();
+    };
+  }
+
+  public bodyBgLoad():Subject<void> {
+    return this.imageLoadSubject;
+  }
+
+  public getBodyBgImageSizes():BgMetrics {
+    let elemW = document.documentElement.clientWidth;
+    let elemH = document.documentElement.clientHeight;
+    if(elemW <= 640) return;
+    let imgRatio = (this.image.height / this.image.width);       // original img ratio
+    let containerRatio = (elemH / elemW);     // container ratio
+
+    let finalHeight, finalWidth;
+    if (containerRatio > imgRatio) {
+      finalHeight = elemH;
+      finalWidth = (elemH / imgRatio);
+    } else {
+      finalWidth = elemW;
+      finalHeight = (elemW * imgRatio);
+    }
+    return { width: finalWidth, height: finalHeight, positionX: (elemW - finalWidth)/2, positionY: (elemH - finalHeight)/2};
+  }
+}
diff --git a/src/app/theme/baCard/bgMetrics.ts b/src/app/theme/baCard/bgMetrics.ts
new file mode 100644
index 00000000..acc460bd
--- /dev/null
+++ b/src/app/theme/baCard/bgMetrics.ts
@@ -0,0 +1,6 @@
+export interface BgMetrics {
+  width:number;
+  height:number;
+  positionX:number;
+  positionY:number;
+}
\ No newline at end of file
diff --git a/src/app/theme/baCard/index.ts b/src/app/theme/baCard/index.ts
new file mode 100644
index 00000000..66478bc9
--- /dev/null
+++ b/src/app/theme/baCard/index.ts
@@ -0,0 +1,2 @@
+export * from './baCard.component';
+export * from './baCardBlur.directive';
\ No newline at end of file
diff --git a/src/app/theme/components/baCard/baCard.component.ts b/src/app/theme/components/baCard/baCard.component.ts
index f96c438c..2665eab9 100644
--- a/src/app/theme/components/baCard/baCard.component.ts
+++ b/src/app/theme/components/baCard/baCard.component.ts
@@ -1,8 +1,11 @@
 import {Component, ViewEncapsulation, Input} from 'angular2/core';
 
+import {BaCardBlur} from './baCardBlur.directive';
+
 @Component({
   selector: 'ba-card',
   styles: [require('./baCard.scss')],
+  directives: [BaCardBlur],
   template: require('./baCard.html'),
   encapsulation: ViewEncapsulation.None
 })
diff --git a/src/app/theme/components/baCard/baCard.html b/src/app/theme/components/baCard/baCard.html
index a597ca69..badaeb55 100644
--- a/src/app/theme/components/baCard/baCard.html
+++ b/src/app/theme/components/baCard/baCard.html
@@ -1,8 +1,8 @@
-<div  class="card {{cardType}} {{baCardClass || ''}}" zoom-in ba-panel-blur>
+<div  class="card {{cardType}} card-blur {{baCardClass || ''}}" zoom-in baCardBlur>
     <div *ngIf="title" class="card-header clearfix">
         <h3 class="card-title">{{title}}</h3>
     </div>
     <div class="card-body">
         <ng-content></ng-content>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/theme/sass/conf/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss
index 902579c3..b864ca34 100644
--- a/src/app/theme/sass/conf/_mixins.scss
+++ b/src/app/theme/sass/conf/_mixins.scss
@@ -117,7 +117,7 @@
   }
 }
 
-@mixin overridecardBg($color, $borderColor, $dropdownColor) {
+@mixin overrideCardBg($color, $borderColor, $dropdownColor) {
   .card.card-blur, .card.card-blur:hover {
     border-color: $borderColor;
     background-color: $color;
diff --git a/src/app/theme/sass/skins/_02_transparent.scss b/src/app/theme/sass/skins/_02_transparent.scss
new file mode 100644
index 00000000..f315f9af
--- /dev/null
+++ b/src/app/theme/sass/skins/_02_transparent.scss
@@ -0,0 +1,52 @@
+body.badmin-transparent {
+  &.mobile{
+    background: none;
+    .body-bg{
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      @include main-background();
+      background-attachment: inherit;
+    }
+    .panel-blur {
+      background: transparent;
+    }
+  }
+  @include overrideColors(#fff);
+  @include overrideCardBg(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
+  .default-color {
+    color: $default-text !important;;
+  }
+  .card.card-blur {
+    background-attachment: fixed;
+    @include scrollbars(.4em, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
+    border-radius: 5px;
+    color: $default;
+    .card-header {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+      transform: translate3d(0,0,0);
+    }
+    .card-body {
+      transform: translate3d(0,0,0);
+    }
+  }
+  .btn-default {
+    color: $default;
+  }
+  .form-control, .bootstrap-tagsinput input {
+    @include placeholderStyle($default, 0.7);
+    background-color: rgba(0, 0, 0, .15);
+    border-radius: 5px;
+    color: $default;
+  }
+  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    @include placeholderStyle($default, 0.5);
+  }
+  .irs-grid-text {
+    color: $default;
+  }
+}
diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss
index 674a4c03..ae7ca054 100644
--- a/src/app/theme/theme.scss
+++ b/src/app/theme/theme.scss
@@ -1,5 +1,6 @@
 @import "sass/conf/conf";
 @import "sass/bootstrap-overrides/overrides";
+@import "sass/skins/02_transparent";
 @import "sass/blur-admin-theme";
 @import "sass/typography";
 @import "sass/buttons";
diff --git a/src/index.html b/src/index.html
index deed78cc..8caaf102 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,7 +19,7 @@
 
 </head>
 
-<body>
+<body class="badmin-transparent">
 
   <app>
     <div id="preloader">