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

Question

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>

Please post tiny bit of HTML + CSS that shows style produced by your master page. — Alexei Levenkov
– Alexei Levenkov, Commented Jun 20, 2012 at 2:24
'<head runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <link href="../changes.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div id="PageWrapper">' — smepperson
– smepperson, Commented Jun 20, 2012 at 2:42
Server side looks ok to me. Can you also grab whatever actually rendered in browser? And while you are at it check if there are any obvious errors reported in the browser's console (usually available by clicking F12). — Alexei Levenkov
– Alexei Levenkov, Commented Jun 20, 2012 at 2:53
For some reason it is not digging the @charset in the beginning of the stylesheet...Could that be the problem? — smepperson
– smepperson, Commented Jun 20, 2012 at 3:11
Do I have to add some C# code for the onload page event maybe? I'm testing the page locally. — smepperson
– smepperson, Commented Jun 20, 2012 at 3:12

Deukalion · Accepted Answer · 2012-06-20 03:47:05Z

1

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>

edited Jun 20, 2012 at 3:47

answered Jun 20, 2012 at 3:05

Deukalion

2,67510 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smepperson Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related