How to create a simple hyperlink from a css background image

I needed a way to hyperlink a background image placed in a SharePoint Master Page so it takes the visitor to the default home page.

The logo is embedded as a background image and want to be able to click-through back to the home page.  Currently the logo is being fed through the ms-globaltitlearea css:

        <td class="ms-globalTitleArea" valign="top">
                <table cellpadding="0" cellspacing="0" width="100%" border="0">

The solution is somewhat quick and dirty.  Create a transparent gif image and place this over the desired area, over the background image in your master page, then set the hyperlink to return the user to the home page.  Your code should look something like this:

<a href="/"><img src="/images/transparentlogo.gif" border="0"></a>

Therefore your final code will look something like this:

        <td class="ms-globalTitleArea" valign="top">
                <table cellpadding="0" cellspacing="0" width="100%" border="0">
                    <tr>
                        <td style="width:350px;" rowspan="2">
                        <a href="/"><img src="/images/transparentlogo.gif" border="0"></a>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s