Solved

adding an image to an image button using css

Posted on 2008-10-02
12
370 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:scm0sml
  • 6
  • 4
  • 2
12 Comments
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 22627042
Try..

.POWMoreInfo
{
   background: url("<%=ResolveUrl("~")%>images/btn_info_org.png") top left no-repeat;
}
0
 

Author Comment

by:scm0sml
ID: 22627058
its not a problem with the css. the image is showing from the css.

its the image button thats moaning
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 22627068
I dont see a "src/source" attribute for your image button.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:scm0sml
ID: 22627370
the question says it happens in the code behind.

this is the code to do it:
btnMoreInfo.CssClass = "POWMoreInfo"
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 22627872
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
 

Author Comment

by:scm0sml
ID: 22628082
couldnt get it working.

cant believe how much time ive spent trying to do something so simple :(
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 22628121
You mean LInkButton does not work for you?
0
 

Author Comment

by:scm0sml
ID: 22628131
nope
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
ID: 22628169
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
 

Author Comment

by:scm0sml
ID: 22628241
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
 
LVL 22

Expert Comment

by:prairiedog
ID: 22628411
Change .POWMoreInfo a:hover
To:
 .POWMoreInfo:hover
0
 

Author Closing Comment

by:scm0sml
ID: 31502488
top man!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

860 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