Question

Is there a way to automatically resize the background image of an element. For example, in my html, I would like to my links to be have a background image. The image has slanted left and right border and round top corners.

One would normally specify the width of an anchor element to accommodate the background image. My problem is this the width should be dynamic and the background image should also adjust if the link’s width is smaller than the width of the image.. kinda like doing it the other way around..

Do you any solutions for this?
Thanks!

Answer 1

There is a fairly standard way of achieving this using 2 elements.

<a href="foo.html" class="button"><span>Button Text</span></a>

As you can see you put a span inside your link that you are going to have be the button. The image you are using will need to be split into 2 pieces one that is the left side and the middle portion of the button and on that is the right side. You will set the contained span to have the wide left side of the button image. The link will contain the right side of the button. Css should look something like this

a{
 background: url("rightimg.png") right no-repeat;
 display:block;
 padding-right: [width of image];
 width:auto;
 height:[height of image];
 line-height:[height of image]
}
a span{
 background: url("leftimg.png") left no-repeat;
 display:block;
 width:auto;
 height:[height of image];
 line-height:[height of image]
}
a{
 background: url("rightHover.png") right no-repeat;
}
a span{
 background: url("leftHover.png") left no-repeat;
}

Yo will need to tweak this around in your css to make it fit into your particular layout.

The reason the left image is in the span is so that if you have any transparency on your button you will not have to overlap the images. Keep this in mind when cutting your image.

I would recommend making the left image above 200px wide to allow for a large amount of expansion space.