ginalster ginalster - 2 months ago 5
C# Question

mvc4 actionlink image

I am trying to replace the infamous "your logo here" in _Layout.cshtml for the ASP.NET MVC4 Web Application. The following works (works as in the image is displayed) for the main page (Home view) but not on the contact view (no image but the action works). I need this to work both in the development environment as well as the production environment.

< p class="site-title">@Html.ActionLink(" ", "Index", "Home", new
{
style = "background: url('./Images/login_sm.bmp') no-repeat center right;
display:block; height:84px; width:264px;"
})
</ p>

Answer

Images are always relative to the location of the current CSS.

If you are using inline CSS you should use url helpers:

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

or if you decide to define a CSS class:

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

where you have defined the .mylink rule in ~/content/Site.css:

.mylink {
    background: url('../images/login_sm.bmp') no-repeat center right; 
    display: block; 
    height: 84px; 
    width: 264px;
}
Comments