Css rounded image

Question

I have an image with rounded corners(png transparent on the corners), about 150px wide, and 25px height, so i'm trying to use it, but it doesn't work for me:

<button><span>Click me</span></button>

And the css:

button{
    border:0;
    background:url(../images/button.png) no-repeat top left;
    height:24px;
    padding-left:10px;
}

And

button span{
    display:block;
    background:transparent url(../images/button.png) no-repeat top right;
    height:24px;
    padding-right:10px;
}

But it doesn't work correctly, the right corner isn't displayed correctly.Any help?

Best Regards,

Why not have just one image as the background of the button? — NGittlen
– NGittlen, Commented Jul 9, 2009 at 17:44

jeroen · Accepted Answer · 2009-07-09 18:00:23Z

1

Using Firebug (use it!) it is clear what is happening. Your right corner shows, but as the the button underneath it continues, you simply don´t see it.

You can solve that using two images, a small one (not so wide, minimum width the padding on the left side) for the left corner and a very wide one for the right corner. That way your buttons don´t overlap and you get the desired effect.

answered Jul 9, 2009 at 18:00

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

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

1 Comment

David Hedlund Over a year ago

the first four words here are enough for me to vote this one up :)

David Hedlund · Accepted Answer · 2009-07-09 17:34:39Z

0

First things first: How is it displayed? You're using the same background images for both left and right corner. Is that in order? (I realize that technically it could be) Also, you might want to try and switch the two (left/right), as span is not a block element, and that might be causing your problems (much in the same way that you can't, say, set a width to a span, unless you also set it to render as a block)

answered Jul 9, 2009 at 17:34

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

sarsnake · Accepted Answer · 2009-07-09 17:41:38Z

0

your span and button elements have the same height (which is smaller than image height by the way). Another observation: why do you need span element at all?

start with the simplest way to do something:

    <button>Click me!</button>

button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;

}

this should display your image. Use border property to debug CSS

answered Jul 9, 2009 at 17:41

sarsnake

28k62 gold badges185 silver badges295 bronze badges

6 Comments

David Hedlund Over a year ago

i don't get your example. there's no image in your css at all...? anyway, you notice how one background is fixed in the right corner, and another in the left? you can't set one left-background and one right-background to the same element, so you'd need to wrap one in another.

David Hedlund Over a year ago

my previous comment was for gnomixa. @uffo, regarding your example, since that background image is wider than the element, you won't see all of it. to use an image like that, you'll need to have a fixed width on your button that matches that of your background image, and if you're doing it like this, then indeed, you're just as well off without the span.

sarsnake Over a year ago

just read the end of your comment now. Height might be the culprit then. Why is he setting it to 24px while the image is 25px long?

Uffo Over a year ago

I want to use this tehnic, because in this way, i can have large buttons with a lot of text, or just a lil bit a text, i want to be fluid

David Hedlund Over a year ago

@gnomixa: just to prove a point, tho, using the same image twice could totally make sense if you're doing it right: davidhedlund.se/tmp/button.htm

|

Collectives™ on Stack Overflow

Css rounded image

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related