Adding class value to sc:image doesnt show up

Question

I am adding a class value to sc:image but when it renders it doesnt show up correct. Here how it looks like in HTML without render:

 <a href="/">
    <sc:Image ID="Logo" runat="server" Field="Header Logo" class="logo" /> 
 </a>

But when it renders to the webpage it shows up like this:

<a href="/">
    <img src="/~/media/logo.png" alt="" width="196" height="34"> 
</a>

However, I want to accomplish something like this:

<a href="/">
    <img src="/~/media/logo.png" alt="" width="196" height="34" class="logo"> 
</a>

How should I approach this problem?

Answer 1

One way to apply a class to the image would be to place the CSS class at a higher block level that is not a web control, perhaps on a wrapping DIV. This might allow you to leverage styling across the whole block and not just the image itself.

To apply the class directly to the IMG tag, you should use the CssClass property of the Image control so that it will render out as a "class" tag:

<a href="/">
     <sc:Image ID="Logo" runat="server" Field="Header Logo" CssClass="logo" />
</a>