Help with auto-resize of background image

Question

Hi, 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.

Answer 2

Do you know the size of your background image?

a
{
  background: #ffffff url('yourimage.gif') no-repeat 0 0;
  display: block;
  width: XXXpx;
  height: YYYpx;
}

CSS can't do a calculation, it's a way of applying style to the page.

But if you don't specifically set the height and width, and you leave off the "display: block", your image will be the width of the text of your "a href".

a
{
  background: #ffffff url('yourimage.gif') no-repeat 0 0;
}

Answer 3

EDIT: Jonathan Park's solution above would be best if the anchor tags in question are menu items (e.g. "tabs" or "buttons"). After rereading your question, I assume that's the case.

You might be able to achieve the described effect with CSS3's background-size or border-image properties. However, I'm not sure how browsers handle these properties when the element involved is inline and wraps to two or more lines. Also, the background-size property will most likely skew your image undesirably.

Note that it may also be possible to achieve this without images. Can you post an image of the shape that you'd like to create around your anchor tags?