asp.net fügen Sie das Hintergrundbild, um ein paar Seiten mit einzelnen masterpage

Ich versuche, fügen Sie hintergrund-Bilder zum nur ein paar Seiten, wo wie die anderen Seiten nicht haben. Brauche ich eine separate masterpage für die Seiten mit Hintergrundbilder oder kann ich dies durch überschreiben der vorhandenen Stile?

Mein letzten Versuch hat eine verschachtelte div mit dem Bild...

Seite mit hintergrund:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master"         AutoEventWireup="true" CodeBehind="Burgundy.aspx.cs" Inherits="WineCellar.UI.Pages.Burgundy.Burgundy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<div style="background-image: url(~/Images/burgundy.png); height: 430px; width: 940px;">
</div>
</asp:Content>

masterpage:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WineCellar.UI.MasterPage"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="/Styles/Site.css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="PageWrapper">
        <div id="Header"><a id="A1" href="~/" runat="server">need a header</a></div>

        <div id="MenuWrapper"> 
            <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"  
                Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                <StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="2px"/>
                <DynamicHoverStyle BackColor="#CC3300" ForeColor="#310062" />
                <DynamicMenuStyle BackColor="#310062" />
                <StaticSelectedStyle BackColor="#CC3300" />
                <DynamicSelectedStyle BackColor="#310062" />
                <DynamicMenuItemStyle HorizontalPadding="6px" VerticalPadding="4px"/>
                <StaticHoverStyle ForeColor="White" BackColor="#310062" />
            </asp:Menu>

            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        </div>
        <div id="MainContent">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
                <RootNodeTemplate></RootNodeTemplate>
            </asp:SiteMapPath>
            <br />
            <h1>Title</h1>
            <br />
            <br />
            <asp:ContentPlaceHolder ID="ApplicationContent" runat="server"></asp:ContentPlaceHolder>
         </div>
        <div id="Footer"><%=DateTime.Now.Year.ToString() %></div>
    </div>
    </form>
 </body>
</html>

maincontent-Stil:

#MainContent 
{
    background-color: #310062;
    width: 940px;
    height: 480px;
    color: #ffffff;
    min-height: 480px;
    padding: 10px;
    font-size: 0.8em;
    float: left;
}

Vielen Dank für jede Hilfe!!!

InformationsquelleAutor kmm | 2011-12-14
  1. 0

    setzen Sie einen contentplaceholder in den Kopf, und auf jeder Seite, setzen Sie ein style-tag mit dem extra div-styling in es. wahrscheinlich nicht der beste Weg, es zu tun, würde aber die Arbeit für ein paar Seiten nur.

    <style>#MainContent{background-image:url(~/Images/burgundy.png);height:430px;width:940px;</style>

    diese überschreiben sollten, den Stil, die Sie in Ihrer externen css-Datei.
    (obwohl im Idealfall alle css in externe css-Dateien und nicht style-tags)

    • Ich versuchte wirklich, dass früher. Mit dem Bild hat nicht gerendert. Ich versucht, indem Sie einen Rahmen um das "Gebiet" ist und es nicht machen. Ich habe getestet das Bild Weg durch die Erteilung einer <asp:Bild auf der Seite gerendert in Ordnung. Vielen Dank für Ihren Vorschlag!
    • in diesem Fall haben Sie versucht <div id="MainContent" <asp:Literal id="ltlClass" runat="server"></asp:Literal>> festlegen und dann die ltlClass.Text "class='new-hintergrund'"
    • Dank kolin - ich weiß nicht, meine Lösung noch, aber ich habe körperlich das Bild in das gleiche Verzeichnis wie die Seite, und es ist jetzt Rendern. ich habe eine Art von Pfad-Problem, ich sollte in der Lage sein, um herauszufinden. ich denke, alles, was ich müde, vor der wohl auch funktioniert hätte, wenn nicht für den Weg. fyi - ich nehme alle Stile und setzen Sie Sie in die .css für saubere Codierung - nochmals vielen Dank!
    InformationsquelleAutor kolin
  2. 0

    Erstellen Sie ein Stylesheet nur für die Kind-Seite. Verwenden Sie den body-tag anwenden der CSS-Stil. 

    body {
    background-image: url('images/background-image.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    vertical-align: top;
    background-position: 0% 20%;
}

    Getestete und funktionierende Lösung.

    InformationsquelleAutor Antony Goddard
Schreibe einen Kommentar