locked
Setting background on masterpage Divs RRS feed

  • Question

  • User-730113369 posted

    Hello kind ASP.NET community. I bid you good morning. Here is my issue, let's see if we can solve it.

    I have a masterpage (masterpages are annoying, aren't they?) with the following definition:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link rel="SHORTCUT ICON" href="images/favicon.ico" />
        <script src="javascript.js" type="text/javascript"></script>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="wrap">
    	<div class="top_content">...</div>
        </div>
        <div class="highlight_wrap">
    	<div class="banner_content">
                <asp:ContentPlaceHolder ID="banner_content" runat="server" />
            </div>
        </div>
        <div class="wrap">
    	<div class="middle_content">
                <asp:ContentPlaceHolder ID="middle_content" runat="server" />
            </div>
        </div>
        <div class="wrap">
    	<div class="footer_content">...</div>
        </div>
        </form>
    </body>
    </html>

    As you can see, I have two dynamic areas for content (top_content also contains dynamic content in the form of a loginview, but that is not important. Maybe it is, I don't know.)

    On respective child pages I need a different color background for "top_content," "middle_content" and "footer_content." This background is an image, whose color is different from image to image (page to page).

    When I define that background image on the masterpage style.css,

    .top_content, .middle_content, .footer_content { background: url(images/css/background_yellow.jpg) repeat-y; }

    it works fine.

    When a child uses this css in it's respective theme css file (all other css definitions work for every page, the themes are set up correctly and referenced correctly) the image simply does not load.

    I am hoping someone can see something that I can't.

    Thanks!

    Thursday, September 17, 2009 6:43 PM

Answers

  • User-730113369 posted

    solved, was receiving a File does not exist error. the css for each respective page is not combined with the css file on the masterpage the way pages are combined. meaning that the reference to the jpg must originate in the theme folder.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 17, 2009 7:25 PM
  • User-627724879 posted

     My advice to you is to create a function in the code behind to return the desired background style. I would refactor out the background image rule to its own classes to make it easier to deal with. So the HTML would look something like this:

    <div class="wrap <%=GetBackGroundClass() %>">blah blah blah</div>


    The C# code-behind might look lilke this:

        public string GetBackGroundClass()
        {
            string fileName = Path.GetFileName(Request.Url.ToString());
            if (fileName == "page1.aspx")
            {
                return "page1bkg";
            }
            
            if (fileName == "page2.aspx")
            {
                return "page2bkg";
            }
    
            return "defaultBackground";
    
        }

    Of course you would have CSS rules for each corresponding background choice that you would return. A case statement might be better or even a Dictionary(T,K), etc to track the rules to the page being rendered.

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 17, 2009 7:30 PM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 20, 2009 2:49 PM

All replies

  • User-730113369 posted

    solved, was receiving a File does not exist error. the css for each respective page is not combined with the css file on the masterpage the way pages are combined. meaning that the reference to the jpg must originate in the theme folder.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 17, 2009 7:25 PM
  • User-627724879 posted

     My advice to you is to create a function in the code behind to return the desired background style. I would refactor out the background image rule to its own classes to make it easier to deal with. So the HTML would look something like this:

    <div class="wrap <%=GetBackGroundClass() %>">blah blah blah</div>


    The C# code-behind might look lilke this:

        public string GetBackGroundClass()
        {
            string fileName = Path.GetFileName(Request.Url.ToString());
            if (fileName == "page1.aspx")
            {
                return "page1bkg";
            }
            
            if (fileName == "page2.aspx")
            {
                return "page2bkg";
            }
    
            return "defaultBackground";
    
        }

    Of course you would have CSS rules for each corresponding background choice that you would return. A case statement might be better or even a Dictionary(T,K), etc to track the rules to the page being rendered.

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 17, 2009 7:30 PM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 20, 2009 2:49 PM