asp.net ajaxcontrolkit balloon popup extender bg color

Question

How to change the bg color of an ajaxcontroltoolkit balloon extender?

I have a panel inside it but I can only set the panel bg color which looks weird.

Code:

<asp:Panel ID="Panel1" runat="server" style="background-color:Red">
        Type some data in here    
    </asp:Panel>


<ajaxToolkit:BalloonPopupExtender ID="PopupControlExtender2" runat="server"
        TargetControlID="lblBalloon"
        BalloonPopupControlID="Panel1"
        Position="BottomRight" 
        BalloonStyle="Rectangle"
        BalloonSize="Small"
        UseShadow="true" 
        ScrollBars="Auto"
        DisplayOnMouseOver="true"
        DisplayOnFocus="false"
        DisplayOnClick="False" />
</asp:Content>

I want to change the white part bg color of the balloon:

How to do that?

Answer 1

its actually not a background color in background, it has a sprite image in background, to change the background image of the balloon, use the style below

.ajax__balloon_popup .oval {

    background-image: url('/image-path');

}

you can find the detail post here