只有部分背景图像显示在asp面板中

时间:2015-05-19 09:40:26

标签: css asp.net background-image updatepanel panel

我创建了一个.aspx页面。该页面包含一个面板,在面板内有两个更新面板(右面板,左面板)。左侧更新面板中有两个div标记,一个表示左侧更新面板的上半部分,另一个div表示左侧更新面板的底部。右侧更新面板也是如此。左侧更新面板中的底部div具有Gridview。

我想在整个面板上添加一个(不重复)背景图像,以便背景图像覆盖整个面板区域。当我向面板添加背景图像时,它只覆盖左上角的更新面板和右上角的更新面板,从而使两个更新面板的底部都保持裸露。

我还使用user controls来表示Header,Left Navigation面板和Right滑动面板。但我不希望背景图像应用于标题或两个侧面板,只是中心面板。

我尝试将BackgroundImageURL提供给面板,并使用CssClass属性链接到包含背景图片的css类。

这是我的代码(.aspx):

<body>
    <Header:main runat="server" ID="header"></Header:main>
    <Leftpnl:left runat="server" ID="pnlLeft"></Leftpnl:left>
    <RightPnl:right runat="server" ID="pnlRight"></RightPnl:right>

    <div class="Title">
        <h2>Tickets</h2>

        <hr class="Sub_Title_HR" />
    </div>

    <form runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:Panel ID="Pnl_New_First" runat="server">
            <div class="Sub_Heading">
                <asp:Label ID="Sub_1" runat="server" Text="Plan Your Trip"></asp:Label>
            </div>

            <asp:Panel ID="Panel_1" runat="server" CssClass="Pnl_BG">
                <div class="New_Left">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <table>
                                <tr>
                                    <td class="Cell_Size">
                                        <asp:Label ID="New_Dep_Title" runat="server" Text="Departure"></asp:Label>
                                        &nbsp;&nbsp;&nbsp;
                                    </td>

                                    <td class="Cell_Size">
                                        <asp:Label ID="New_Arr_Title" runat="server" Text="Arrival"></asp:Label>
                                        &nbsp;&nbsp;&nbsp;
                                    </td>

                                    <td class="Cell_Size">
                                        <asp:Label ID="New_Date_Title" runat="server" Text="Date"></asp:Label>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="Cell_Size">
                                        <asp:DropDownList ID="New_Dep_DDL" CssClass="DDL" runat="server">
                                            <asp:ListItem>IND</asp:ListItem>
                                            <asp:ListItem>KUL</asp:ListItem>
                                        </asp:DropDownList>
                                        &nbsp;&nbsp;&nbsp;
                                    </td>

                                    <td class="Cell_Size">
                                        <asp:DropDownList ID="New_Arr_DDL" CssClass="DDL" runat="server">
                                            <asp:ListItem>CMB</asp:ListItem>
                                            <asp:ListItem>KUL</asp:ListItem>
                                        </asp:DropDownList>
                                        &nbsp;&nbsp;&nbsp;
                                    </td>

                                    <td>
                                        <telerik:RadDatePicker ID="New_Date1" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px">
                                        </telerik:RadDatePicker>
                                    </td>

                                    <td>
                                        &nbsp;&nbsp;&nbsp;
                                        <asp:Button ID="New_Search" runat="server" Text="Search" />
                                   </td>
                                </tr>
                                <br /><br />
                            </table>
                        </ContentTemplate>
                    </asp:UpdatePanel>

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <table id="UL_Outbound_Tab">
                                <tr>
                                    <td id="New_Outbound_Head">Outbound : <asp:Label ID="Dep_Airport" runat="server" Text=""></asp:Label> To <asp:Label ID="Arr_Airport" runat="server" Text=""></asp:Label>
                                    </td>
                                </tr>

                                <asp:GridView ID="New_Outbound_Grid" runat="server">
                                </asp:GridView>

                                <tr>
                                    <td>
                                        <asp:Button ID="New_Add" runat="server" Text="Add" />
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>

                <div class="New_Right">
                    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                        <ContentTemplate>
                            <asp:Label ID="New_My_Trip_Head" runat="server" Text="My Trip"></asp:Label>

                            <table id="New_My_Trip_Tab">
                                <asp:GridView ID="My_Trip_Grid" runat="server">
                                </asp:GridView>
                            </table>
                        </ContentTemplate>
                    </asp:UpdatePanel>

                    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                        <ContentTemplate>
                            <asp:Label ID="New_Tick_Val_Head" runat="server" Text="Ticket Validity Period"></asp:Label>

                            <table id="New_Tick_Val_Tab">
                                <tr>
                                    <td>
                                        <asp:Label ID="Val_From" runat="server" Text="Valid From : "></asp:Label>
                                    </td>

                                    <td>
                                        <telerik:RadDatePicker ID="Val_From_Date" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px"></telerik:RadDatePicker>
                                    </td>

                                    <td style="width: 100%">
                                        <asp:Label ID="Val_To" runat="server" Text="Valid To : "></asp:Label>
                                    </td>

                                    <td>
                                        <telerik:RadDatePicker ID="Val_To_Date" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px"></telerik:RadDatePicker>
                                    </td>
                                </tr>

                                <caption>
                                    <tr style="margin-top: 5%">
                                        <td style="width: 35%">
                                            <asp:Label ID="Val_Com" runat="server" Text="User Comments : "></asp:Label>
                                        </td>

                                        <td>
                                            <asp:TextBox ID="Val_Com_Txt" runat="server" Rows="5" TextMode="MultiLine" style="width: 150%; resize: none" placeholder="Text Here"></asp:TextBox>
                                        </td>
                                    </tr>
                                 </caption>
                            </table>

                            <asp:ImageButton class="next1 Left_Right_Controls" runat="server" OnClientClick="next1()" ImageUrl="~/Images/Buttons/page_right_arrow.png" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </asp:panel>    

            <div id="step_init" class="Steps">
                <img src="Images/Steps/1.png" alt="" />
            </div>
        </asp:Panel>
    </form>
</body>

这是我的CSS:

.Pnl_BG {
    background-image: url(../Images/travelling.jpg);
    background-size:100% 100%;
    background-repeat: no-repeat;
}

请帮忙......

0 个答案:

没有答案