kmm kmm - 1 month ago 9
ASP.NET (C#) Question

asp.net add background image to a few pages using single masterpage

I am trying to add background images to only a few pages where as the other pages will not have one. Do I need a separate masterpage for the pages with background images or can I do this by overriding the existing styles?

My last attempt has a nested div with the image...

page with background:

<%@ 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 style:

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


Thanks for any help!

Answer

put a contentplaceholder in the head, and in each page put a style tag with the extra div styling in it. probably not the best way to do it, but would work for a few pages only.

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

this should override the style you set in your external css file. (although ideally all css should be placed in external css files, and not style tags)