Error in the background/overlay of a jQuery dialog widget with the modal option

Question

I am using the jQuery dialog widget with the modal option over a wordpress site.
The background (overlay) is not all grey, there is a white stripe across the background.

$("#popup").dialog({
    dialogClass: "alert",
    width: crmpJs.setup.social_popup_custom_content_use ? crmpJs.setup.social_popup_setup_width : 640,
    height: crmpJs.setup.social_popup_custom_content_use ? crmpJs.setup.social_popup_setup_height : "auto",
    autoOpen: true,
    modal: true,
    resizable : false,
    draggable : false,
    zIndex: 10000,
    closeOnEscape: crmpJs.setup.social_popup_content_locker_use == "yes" ? false : true
});

Any idea of the reason for this malfunction?

Answer 1

It's your CSS. Change the repeat-x to just repeat:

.ui-widget-overlay {
    background: url("../img/overlay-bg.png") repeat-x scroll 50% 50% #000000;
    opacity: 0.5;
}

to:

.ui-widget-overlay {
    background: url("../img/overlay-bg.png") repeat scroll 50% 50% #000000;
    opacity: 0.5;
}