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

Question

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!

score 0 · Answer 1 · answered Nov 04 '16 at 19:17

Create a style sheet just for the child page. Use the body tag to apply the CSS style.

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%;
}

Tested and working solution.

score 0 · Accepted Answer · answered Dec 14 '11 at 16:35

0

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)

answered Dec 14 '11 at 16:35

kolin

2,326
1
28
46

I actually tried that earlier. The image did not render. I tried putting a border around the "area" as well and it did not render. I have tested the image path by placing an – kmm Dec 14 '11 at 16:51
in that case, have you tried `
>` and then setting ltlClass.Text to "class='new-background'"
– kolin Dec 14 '11 at 16:58
thanks kolin - i do not know my solution yet, but i have physically put the image in the same directory as the page and it is now rendering. i have some sort of path issue that i should be able to figure out. i think everything i tired before probably would have worked if not for the path. fyi - i will take all styles and put them into the .css for cleaner coding - thanks again! – kmm Dec 14 '11 at 18:33

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

2 Answers2