Assign ASP.net Button image via css class

Question

I know i can use imagebutton for image buttons. But i want to use css sprites to decrease downloaded image count. So i want to assign normal buttons to image via css class. But it seems like not working.

Here is the code and image i try

enter image description here

the button codes

    <asp:Button ID="btn1" CssClass="filter-tr" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button2" CssClass="filter-en" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button3" CssClass="flying" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button1" CssClass="fire" runat="server" />

here the css class code

    .filter-tr, .filter-en, .flying, .fire
{ display: block; background: url('images/image1.png') no-repeat; }

filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
flying { background-position: -0px -50px; width: 44px; height: 16px; }
fire { background-position: -0px -66px; width: 44px; height: 16px; }

but this way it works

.filter-tr {  display: block; background: url('images/image1.png') no-repeat;  background-position: -0px -0px; width: 60px; height: 25px; border-width:0px; }

Where in your directory structure are the css and the images folder located? — nickmoriarty
– nickmoriarty, Commented Feb 24, 2011 at 21:56
there is no problem with the image url or include css i tried. also updated the first question — Furkan Gözükara
– Furkan Gözükara, Commented Feb 24, 2011 at 22:00

StriplingWarrior · Accepted Answer · 2011-02-24 21:59:06Z

3

The first thing I'd do is set the background URL to use an absolute location:

.filter-tr, .filter-en, .flying, .fire
{ display: block; background: url('/images/image1.png') no-repeat; }

Without more information, that's all the help I can provide.

Edit Should have noticed it before. Class names all need to have a . in front of them:

.filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
.filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
.flying { background-position: -0px -50px; width: 44px; height: 16px; }
.fire { background-position: -0px -66px; width: 44px; height: 16px; }

answered Feb 24, 2011 at 21:59

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Furkan Gözükara Over a year ago

there is no problem with the image url or include css i tried. also updated the first question

Bala R · Accepted Answer · 2011-02-24 22:16:16Z

This works

.filter-tr
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -0px;
        width: 60px;
        height: 25px;
    }
    .filter-en
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -25px;
        width: 60px;
        height: 25px;
    }
    .flying
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -50px;
        width: 44px;
        height: 16px;
    }
    .fire
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -66px;
        width: 44px;
        height: 16px;
    }

Collectives™ on Stack Overflow

Assign ASP.net Button image via css class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related