attache a link to a background image

css background image with a link

[smallcompany]

I have an HTML code with three tabs (Bootstrap). I use CSS to have an image at certain position within each tab.
A single line of CSS code shows an image at the spot I want. That's nice!

Now... I want that image to have a link assigned to it. I came across more or less the same tricks which unfortunately don't work well with responsive design. The best I could get was when using absolute position which fails as soon as I change the browser window from full to anything else.

Why I'm not able to assign the position to a class of a link so it follows the image?

Here is the CSS code for an image:

.back-image{background:url("../images/file.png") no-repeat 95% 55%}

What kind of CSS code applied to a link would make it follow the image? Let's say that an image is 130x130 px.

Thanks

[not2easy]

Does the image always have the same link assigned to it or is it a background image for whatever link you need for that page?

[smallcompany]

It would be the same link.

Thanks

[lucy24]

Can I assume the humble old-fashioned image map (pure HTML, no CSS) won't work?

[smallcompany]

Can I assume the humble old-fashioned image map (pure HTML, no CSS) won't work?

Thanks for asking.
Well, I have three (Bootstrap) tabs where a badge appears. Perfect to have CSS image background so no HTML gets repeated across the tabs.
I wish if I could have a link only once, but for now, it looks to me that I have to have a link in each tab, with CSS properties that will position it and get an image in its background.

And actually I made something that looks promising:

HTML:

<a href="#" class="link-image-back">Link</a>

.link-image-back{background:url("../images/image.png") no-repeat;display:block;height:130px;width:130px;position:absolute;top:45%;left:75%}

I had to add this for the (parent) div where the link is:

.div{position:relative}

Plus, I added this to hide the text, but I guess I could use a simple space as well ( ).

a..link-image-back{line-height:0;font-size:0;color:transparent;}

It looks like this gives me a control over positioning an image while link sticks to it. It is a responsive design and changing the browser window shape does not affect it much, it still look good.
Mobile is a different story, I'll see what to do there.

Anyhow, do you see any trouble here with such code?

Thanks