CSS Background image not displaying in ActionLink

Question

I'm having an issue with the CSS in my ActionLink on the _Layout.cshtml file.

I changed the "Your logo here" text to reflect an image drawn in the background through a CSS class, however it seems to not load the picture..

<p class="site-title">@Html.ActionLink(" ", "Index", "Home", null, new { @class = "sitelogo" })</p>

The CSS is:

.sitelogo {
background: url("../Images/topLogo.png") no-repeat center right;
display: block;
height: 84px;
width: 585px;

The box is displayed in a block with the height and width dimensions, however the picture doesn't display, yet if I use FireBug inspect CSS it pulls the image when I mouse-over the URL in the CSS just fine. Am I missing something painfully obvious with this?

Answer 1

You can change a little bit the html to achieve that as well:

Replace this

@Html.ActionLink(" ", "Index", "Home", null, new { @class = "sitelogo" })

With this:

<a href="@Url.Action("Index", "Home")">
    <img alt="your logo" src="@Url.Content("~/Images/<YOUR LOGO>")" />
</a>

Hope this helps

Answer 2

Are you sure that the pathing is correct? The URL you specify in CSS is relative to that CSS file.

CssFolder
       styles.css
ImagesFolder
       image.png

Alternatively you could use url.content to ensure you're taking the right path:

@Html.ActionLink(
    " ", 
    "Index", 
    "Home", 
    new { 
        style = "background: url('" + Url.Content("~/Images/yourimage.png") + "') no-repeat center right; display:block; height:84px; width:585px;" 
    }
)