frame using a Background-image

Question

I put a frame in my images.

I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.

img.frame
{
    background-image:url('http://bit.ly/k8g8zz');
    background-repeat:no-repeat;
    background-position: center;
    background-size: 100%;
    padding:23px 14px 60px;
}

I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.

If possible, change the jsFiddle and send me the link

See the complete code here .

As you can see in jsFiddle, the frame is the wrong size.. she needs to grow along with the image and have a padding.

Thank you all for your help.

Answer 1

You almost have it! Just set both dimensions of background-size ;

background-size: 100% 100%;

http://jsfiddle.net/vLBXH/

Answer 2

You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:

<div class="img_frame">
    <a href="#nohref"><imgr src="#noimg" /></a>
</div>