Member Avatar for syd919

Hello I have a problem with customizing my menu, I created a new mvc web application. Visual studio has created a default menu but I wanna add a background image like an image with "Home" or About instead of the default one. here is my code.

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1 style="font-family:verdana;"></h1>

            </div>

           <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>

            <div id="menucontainer" >

                <ul id="menu" >
                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%: Html.ActionLink("Contact", "Index", "Contact")%></li>
                    <li><%: Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>

the css file

#menucontainer
{
    margin-top:40px;
}.menuStyle{background-image: url("~/images/home.png");}
  • 2 Contributors
  • 1 Reply
  • 119 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by IbrahemShehata
Member Avatar for IbrahemShehata

The Problem is in your CSS file
Just Replace "" with '' like this

#menucontainer
{    
    margin-top:40px;
}
.menuStyle
{
    background-image: url('~/images/home.png');
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.