Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Hyperlink Image in CSS or skin for theme

Posted on 2007-11-20
Medium Priority
Last Modified: 2008-02-01
I've created several themes using css and skins.

In my master page, I want to have the logo dependent upon the current theme being used. So within each theme directory, I have a logo named: Logo.gif

Currently, I just have this within the master page.

                        <a href="<%= ResolveClientUrl("~/default.asp")%>">
                    <img src='<%= ResolveClientUrl("logo.gif")%>' width='228'
                                height='77' style='border: none'></a></td>

How do I change it to setup the logo.gif within the skin or style sheet, and then display it (hyperlinked as above) within my master page?

Question by:Starr Duskk
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
LVL 29

Accepted Solution

Göran Andersson earned 2000 total points
ID: 20325913
If you specify the image as a background in the css, the browser will get the image relative to the css file instead of relative to the page.

If you put the logo image in the theme filder where the css file is, this will use it:
.Logo { width: 228px; height: 77px; background: url(logo.gif); }
<a href="<%= ResolveClientUrl("~/default.asp")%>" class="Logo"></a>

Open in new window


Author Comment

by:Starr Duskk
ID: 20326031
hmmm. I tried this:

<asp:HyperLink ID="HyperLink1" runat="server" CssClass="Logo" NavigateUrl="~/Default.aspx">[HyperLink1]</asp:HyperLink>

and this:

<a href="<%= ResolveClientUrl("~/default.asp")%>" class="Logo"></a>

This does display the logo, but no hyperlink:

                    <div class="Logo"></div>

What am I doing wrong?


LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 2000 total points
ID: 20326054
Ah, I missed that the link has to be a block element in order for one to specify the size.
.Logo { display: block; width: 228px; height: 77px; background: url(logo.gif); }

Open in new window


Author Comment

by:Starr Duskk
ID: 20330230
yay, thanks!

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question