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!

Solution

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)