add background image to asp.net master web page asp.net 4.0 and html5

c# html css background-image asp.net-4.0

13,940

This code works for me, but I don't know if the code above is how it looks. Cause you post a stylesheet value in the middle of a div.

Also, if the page can't read the file. Try a different file or try changing the search path for the file. Maybe it can't read it because it's outside the server dir. Because the CSS code looks correct.

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

    <link href="../changes.css" rel="stylesheet" type="text/css" />
    <link href="../style.css" rel="stylesheet" type="text/css" />
    <link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>

    <meta charset="utf-8" />
    <style type="text/css">


        // If you want the "Page" background to be this way:
        html, body
        {
            background-color: #000;
            background-image: url('../images/darker_wood_1600x1200.jpg');
            background-attachment: scroll;
            background-repeat: repeat-x;
        }

        // Or the PageWrapper
        div#PageWrapper
        {
            background-color: #000;
            background-image: url('../images/darker_wood_1600x1200.jpg');
            background-attachment: scroll;
            background-repeat: repeat-x;
        }


    </style>
</head>
<body>
    <!--- <form id="form1" runat="server"> --->
    <form method="post" action="Default.aspx" id="form1">
        <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
        </div>
        <div id="PageWrapper">

            <div id="Header">
                <a href="./">Header here</a>
            </div>
            <div id="MenuWrapper">
                Menu here
            </div>

            <div id="MainContent">
            </div>

            <div id="Sidebar">
                Sidebar here
            </div>
            <div id="Footer">
                Footer here
            </div>
        </div>
    </form>
    <!--- </form> --->
</body>
</html>

13,940

Author by

smepperson

Front End Designer Developer

Updated on June 04, 2022

Comments

smepperson almost 2 years

Using ASP.NET, C#, HTML5 and CSS3. My MasterPage is not recognizing the background image I have set in my stylesheet. I found an answer from 2009 on the ASP.NET forums from an MSN developer and it is still not working. After checking the code, the answer is relevant to XHTML transitional, the default doctype for .NET in Visual Studio.

Any suggestions? Thank you in advance.

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

    <link href="../changes.css" rel="stylesheet" type="text/css" />
    <link href="../style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <form id="form1" runat="server">
    <div id="PageWrapper">


    html, body {
    background-color: #000;
    background-image: url('../images/darker_wood_1600x1200.jpg');
    background-attachment: scroll;
    background-repeat: repeat-x;
            }






    <!DOCTYPE html>
<html>
<meta charset="utf-8" />

<head><title>

</title>
<link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>

    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
</div>

    <div id="PageWrapper">

    <div id="Header"><a href="./">Header here
        </a></div>

    <div id="MenuWrapper">Menu here</div>

    <div id="MainContent">


    </div>

    <div id="Sidebar">Sidebar here</div>
    <div id="Footer">Footer here</div>
    </div>

</form>

smepperson almost 12 years

Tried your suggestion and put the style in the MasterPage. Still nothing. (btw...the last part of the code is a code snippet from the css page and not truly located in the PageWrapper div). I have checked the path, and when rolling over the link it shows the jpg fine. Maybe I need to place the background request in the code behind for the on-load event of the page.
Deukalion almost 12 years

If I look at your code above, you have "head" before "doctype", you have a form "runat=server" but with no ending tag, you have multiple head tag and one without ending tag. Is everything snippets? Because the way it's posted doesn't make sense. I would suggest that you post it in the right order or the whole code.