This is a migrated thread and some comments may be shown as answers.

Background Image for Modal on RadWindow

1 Answer 126 Views
Window
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 12 Apr 2012, 04:08 PM
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

1 Answer, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 12 Apr 2012, 09:48 PM
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
Tags
Window
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Share this question
or