asp.net - How to set a background image for a Panel

Image as Panel background

Panel is an asp.net web server control. it is a container control for other controls and html elements. pnael server control's have a built in property to set or change panel's background image programmatically at run time.

panel control's BackImageUrl property get or set the url of the background image for the panel control. this property value type is System.String. the 'String' represents the url of panel background image. this property default value is String.Empty that means no image is set for panel background. it has a good feature that, if the background image is smaller than the panel control then it will be tiled to fill the panel.

the following asp.net c# example code demonstrate us how can we display a custom image as panel control's background in an asp.net application.

PanelBackImageUrl.aspx


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        Panel1.BackImageUrl= "~/Images/Dolphin.gif";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to use image as Panel background</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Navy; font-style:italic;">Panel Example: BackImageUrl</h2>
        <asp:Panel 
             ID="Panel1"
             runat="server"
             Height="150"
             Width="350"
             ForeColor="DeepPink"
             HorizontalAlign="Center"
             Font-Size="Large"
             Font-Names="Comic Sans MS"
             BorderWidth="3"
             BorderColor="SkyBlue"
             BackColor="AliceBlue"
             >
             <br />
             Panel BackImageUrl Property
        </asp:Panel>
        <br /><br />
        <asp:Button 
             ID="Button1" 
             runat="server"
             ForeColor="DeepPink"
             Text="Set Panel Background Image"
             Height="45"
             OnClick="Button1_Click"
             Font-Bold="true"
             />
    </div>
    </form>
</body>
</html>

Related asp.net examples