TelerikModalOverlay

[Simon Maystre]

I have successfully managed to use the TelerikModalOverlay class to put an image behind a modal pop-up window, but I have a small issue in that the background image is not centered in the background and starts from the top-left of the browser. Below is the CSS I am using currently:

.TelerikModalOverlay
{
    background-position: center top !important;
    background: url(images/backgroundmain.jpg) !important;
    background-repeat: no-repeat;
    filter: alpha(opacity=99) !important;/*for IE 5.5+*/
    opacity: .99 !important;/*for FF 2x, Opera 9x*/
    -moz-opacity: .99 !important;/*for FF 1x*/  
    }

Is there any way to force the background image to be centered?

Thanks

Simon

[Bozhidar]

Hello Simon,

To achieve the desired behavior, you could use the following CSS:

.TelerikModalOverlay
        {
            background-position: center !important;
            background-image: url(images/backgroundmain.jpg) !important;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

That will put the background image in the screen center and it will stay there even if you scroll the page.


Regards,
Bojo
the Telerik team

[Simon Maystre]

Excellent, thanks, that sorted out the problem and is now showing as required.

Simon