.background-mixins(){

    /* Background Image */

    .genBackgroundImageClasses(@backgroundType, @bgImage, @blurAmount:none, @color:transparent, @colorOpacity: 75%, @fixed: true, @xpos: center, @ypos: center){
        .ivx-background-image-@{backgroundType}{
            position: fixed; //make sure this will work when applied to elements like buttons
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 0 1000px fadeOut(@color, @colorOpacity);
            background-image: url(@bgImage);
            background-position: @xpos @ypos;
            background-size: cover;
            left: 0;
            top: 0;
            z-index: -1;
            transform: scale(1.1);
            ._blur(@blurAmount);
        }
    }

    ._blur(@blurAmount){
        -webkit-filter: ~'blur('@blurAmount~')';
        -moz-filter: ~'blur('@blurAmount~')';
        -o-filter: ~'blur('@blurAmount~')';
        -ms-filter:~'blur('@blurAmount~')';
        filter: ~'blur('@blurAmount~')';
    }

    /* Background Gradient */

    .genBackgroundGradientClasses(@backgroundType, @colorList, @direction:to bottom, @color:transparent, @colorOpacity: 75%){
        .ivx-background-gradient-@{backgroundType}{
            position: fixed;  //make sure this will work when applied to elements like buttons
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 0 1000px fadeOut(@color, @colorOpacity);
            background-image: svg-gradient(@direction, @colorList);
            background-position: center center;
            background-size: cover;
            left: 0;
            top: 0;
            z-index: -1;
            transform: scale(1.1);
        }
    }

}