Problems displaying background image using external CSS file in ASP.NET

StackOverflow https://stackoverflow.com/questions/20201163

Question

I am using Visual studio 2013 and asp.net, and I am trying to learn how to write a basic web-site. Unfortunatley I am having difficulty with applying style properties, contained within an external css stylesheet, to <a> elements on a master page of an asp.net application. I appreciate this question has been asked in many times, but I cannot seem to make any of the solutions work for me.

Some of the file structure of my application is;

- MyApplication
    -Content
        Site.css
    -Images
        nav_bgrnd.gif
        nav_divider.gif

I have the following "link" element in my head section of my master page;

<head runat="server">

<link rel="stylesheet" type="text/css" href="~/content/Site.css" runat="server"/>

</head>

I have the following menu item in the body of my html in the master page;

 <nav id="navformenu" style="width:910px; height:32px; position: relative; top:-5px; background:none;" >
        <ul id="menu" class="menu">
            <li class="menuli" >
                <a id="about" runat="server" class="menulia"  href="~/Home"  >Home</a>
            </li>
            <li  class="menuli">
                <a id="about" runat="server" class="menulia"  href="~/About"  >About</a>
            </li>
            <li  class="menuli">
                <a id="contact" runat="server" class="menulia" href="~/Contact">Contact</a>
            </li>
            <li  class="menuli">
                <a id="mynewpage" runat="server" class="menulia" href="~/WebForm1" >MyNewPage</a>
            </li>              
        </ul>
    </nav>

Finally the Site.css looks like;

.menu
{
    width:910px; 
    background: #fff url(/Images/nav_bgrnd.gif) top repeat-x;
    height:32px; 
    position:relative; 
    z-index:1000;
}

.menuli
{
    margin:0 2px 0 -3px; 
    font-size:11px; 
    line-height:21px; 
    padding:0 16px 0 0; 
    display:inline; 
    height:32px; 
    display:block;
    float:left;    
}

.menulia
{     
   background: transparent url(/images/nav_divider.gif) left 9px no-repeat;   
   font-family:serif;
   font-weight:normal;
   padding: 6px 0 10px 15px; 
   color:#010304; 
   font-size:18px;
   display:block; 
   height: 41px; 

}

The css file is being correctly referenced by the master page since if I change the font-size for example in the .menulia class then this is reflected both in the visual studio designer, and in the Default.aspx webpage in firefox. But the images do not show up. In contrast when I put all the css style code in the html code directly using style="LOTS OF CODE" then the images are found.

Any help would be greatly appreciated.

Was it helpful?

Solution

You need to change also the path for your Images: you have

/Images/nav_bgrnd.gif

But you need to make a setpback to search the correct folder so change it for this

../Images/nav_bgrnd.gif

You are setting your path in relation to another element not to the CSS you can check more here and here

OTHER TIPS

You need to set full path like this:

(MyApplication/Images/nav_bgrnd.gif)

my usual asp -VS I have it always like this:

assets/images/image.jpg and never have an issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top