The project I’m working on has hard coded URLs in the CSS file like this:
a.edit
{
background: url(/TestSite/Images/Edit.png) no-repeat top left;
display: inline-block;
width: 16px;
height: 16px;
padding:1px;
margin:1px;
text-indent: -9999px; /* hides the link text */
}
When the site is moved to production, these links break. I’m looking for a solution so it just works where ever the site is run.
This is what I came up with and it works but I’m wondering if there is a better way:
<script>
$(document).ready(function () {
$("a.edit").css('background', 'url(' + $("body").data("baseurl") + 'Images/Edit.png) no-repeat top left');
});
</script>
<body data-baseurl="~/">...</body>
CSS handles relative URLS relative to where the stylesheet is located. Take advantage of that and don’t rewrite URLs in javascript.