Absolute Paths in SharePoint

What if you want to add an image to your MasterPage that will be changed in each sub site, a logo for example, you can add an image tag like this:

<img src="../SiteImages/MyLogo.gif" alt="SubSiteLogo " />

This is fine when you are browsing a page in the Pages list (http://www.mysite.com/subsite/pages/mypage.aspx), but what if you are browsing an overview.aspx page for example for a Survey list (http://www.mysite.com/subsite/lists/surveyname/overview.aspx), you will need to change the tag to:

<img src="../../SiteImages/MyLogo.gif" alt="SubSiteLogo " />

So how to add the image tag to make it work for both pages?
The solution is to change your tag to this:

<img src="<% $SPUrl:~Site/SiteImages/MyLogo.gif %>" alt="SubSiteLogo" runat="server"/>

Where ~Site is your absolute current site URL

Okay, now what if this image is not changed per sub site, but it is changed per SiteCollection and the url is something like this: (http://www.mysite.com/anothersitecollection/subsite/pages/mypage.aspx), in my default SiteCollection I can make the tag like this:

<img src="/SiteImages/MyLogo.gif" alt="SubSiteLogo " />

But in another site collection this will not work with me, so I can make it like this:

<img src="<% $SPUrl:~ SiteCollection/SiteImages/MyLogo.gif %>" alt="SubSiteLogo" runat="server"/>

The same thing here with the stylesheet, you can do the same:

<link rel="stylesheet" type="text/css" href="<% $SPUrl:~Site/StyleSheets/MyStyle.css %>" runat="server"/>