adding an image to an image button using css

I have the following css class:
.POWMoreInfo
{
   background: url("../images/btn_info_org.png") top left no-repeat;
}

I then have the image button:
<asp:ImageButton ID="btnMoreInfo" runat="server" PostBackUrl="../Advertising.aspx" AlternateText="More Information" />            

in my code behind i set the css class of the button to use the class i have shown here.

This works but i also get an error image because i have not set imageurl for the button.

Is there a way around this?

I have attached a screenshot just to show what i mean.
example.jpg
scm0smlAsked:
Who is Participating?
 
prairiedogCommented:
How about adding width and height in your CSS?
width:32px;
height:32px;
Change the numbers to match your actual image size. Remember, you will also need to add display:block; in your css.

.POWMoreInfo
{
	background:url("("../images/btn_info_org.png") top left no-repeat;
	display:block; 
	width:32px;
	height:32px;
}

Open in new window

0
 
Saqib KhanSenior DeveloperCommented:
Try..

.POWMoreInfo
{
   background: url("<%=ResolveUrl("~")%>images/btn_info_org.png") top left no-repeat;
}
0
 
scm0smlAuthor Commented:
its not a problem with the css. the image is showing from the css.

its the image button thats moaning
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Saqib KhanSenior DeveloperCommented:
I dont see a "src/source" attribute for your image button.
0
 
scm0smlAuthor Commented:
the question says it happens in the code behind.

this is the code to do it:
btnMoreInfo.CssClass = "POWMoreInfo"
0
 
prairiedogCommented:
Don't think you can do it with ImageButton. Try LinkButton instead.
If you do decide to use LinkButton, make sure you add display:block in your CSS.
0
 
scm0smlAuthor Commented:
couldnt get it working.

cant believe how much time ive spent trying to do something so simple :(
0
 
prairiedogCommented:
You mean LInkButton does not work for you?
0
 
scm0smlAuthor Commented:
nope
0
 
scm0smlAuthor Commented:
yeah ok that is now showing the image.

while u r on a roll can u see what is wrong with this?

.POWMoreInfo
{  
 background:url("../images/btn_info_org.png") top left no-repeat;
      display:block;
      width:98px;
      height:25px;

}

.POWMoreInfo a:hover
{  
    background:url("../images/btn_info_org2.png") top left no-repeat;
      display:block;
      width:98px;
      height:25px;
}

i have just changed the image name wanting it to show a different image when u hover over the button
0
 
prairiedogCommented:
Change .POWMoreInfo a:hover
To:
 .POWMoreInfo:hover
0
 
scm0smlAuthor Commented:
top man!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.