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

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.

For referencing the image files from CSS, try this: url(../images/nav_divider.gif) — CopyPasteDev, Nov 25 '13 at 19:19

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered Nov 25 '13 at 19:13

DaniP

37,813
8
65
74

Thanks Danko for this. I did try this but it did not work. Then I realised there was huge amounts of css code below the code I posted (I am modifying one of the example asp.net apps from visual studio). Thus one of the later bits of css code was overriding the ../ code you suggest. When I remove all the other code so my css file is just as posted here then your suggestion works. Thanks. – dandar Nov 25 '13 at 21:00

score 0 · Answer 2 · answered Nov 25 '13 at 19:26

0

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.

answered Nov 25 '13 at 19:26

Riskbreaker

4,621
1
23
31

Thanks for the reply Riskbreaker. I tried your suggestion but this did not work. The only thing that appears to do the trick is the "../" notation. – dandar Nov 25 '13 at 21:02

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

2 Answers2