Background Image for Modal on RadWindow

2 posts, 0 answers
  1. Steve
    Steve avatar
    24 posts
    Member since:
    Mar 2012

    Posted 12 Apr 2012 Link to this post

    Hello,

    Is it possible to use an image (diagonal lines) as the background for the Modal feature on a RadWindow?

    I have tried this option below, however it does not work:

    .TelerikModalOverlay
    {
        background-image: url('icons/modalBackground.png') !important;
        background-repeat: repeat !important;
        filter: alpha(opacity=50) !important;
        opacity: .50 !important;
        -moz-opacity: .50 !important;    
    }

    Any suggestions on how to achieve this?

    Regards,

    Steve
  2. Steve
    Steve avatar
    24 posts
    Member since:
    Mar 2012

    Posted 12 Apr 2012 Link to this post

    I found a CSS driven gradient work-around for my particular scenario.  In case anyone is interested, this will give the same effect I desired:

    .TelerikModalOverlay {
        background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bbb), color-stop(0.25, #bbb), color-stop(0.25, #aaa),
            color-stop(0.5, #aaa), color-stop(0.5, #bbb), color-stop(0.75, #bbb), color-stop(0.75, #aaa)) !important;
        background-image: -webkit-linear-gradient(left top, #bbb 0%, #bbb 25%, #aaa 25%, #aaa 50%, #bbb 50%, #bbb 75%, #aaa 75%) !important;
        background-image: -moz-linear-gradient(left top, #bbb 0%, #bbb 25%, #aaa 25%, #aaa 50%, #bbb 50%, #bbb 75%, #aaa 75%) !important;
        background-image: -ms-linear-gradient(left top, #bbb 0%, #bbb 25%, #aaa 25%, #aaa 50%, #bbb 50%, #bbb 75%, #aaa 75%) !important;
        background-image: -o-linear-gradient(left top, #bbb 0%, #bbb 25%, #aaa 25%, #aaa 50%, #bbb 50%, #bbb 75%, #aaa 75%) !important;
        background-image: linear-gradient(left top, #bbb 0%, #bbb 25%, #aaa 25%, #aaa 50%, #bbb 50%, #bbb 75%, #aaa 75%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#bbbbbb',GradientType=0 ) !important;
        background-size: 30px 30px !important;
        width:100% !important;
        height:100% !important;
        filter: alpha(opacity=70) !important;
        opacity: .70 !important;
        -moz-opacity: .70 !important;    
    }


    I would still be interested in an image as well if anyone knows how to achieve this.

    Regards,

    Steve
Back to Top