使用href属性作为CSS背景图像

Question

I have the following HTML which I cannot modify. There is a CSS file that I can. Is there a way to get the href value/attribute and use it as CSS background-image?

I need something like:

    background-image: url(href value);

Is that possible? The href value is the result of a search, so it's not always the same.

<tr class="trdata1">
    <td class="file">
        <span class="nobr">
            <nobr>
                <a href="/C/.../.../image.jpg">
                    <img class="icon" src="/file.gif" alt="">$image.jpg
                </a>
            </nobr>
        </span>
    </td>
</tr>

Answer 1

No, there is no way to do it with pure CSS, you will have to use Javascript for that. Eg with jQuery:

$('.your-element').css(
  'background-image', 'url(' + $('.trdata1 > .file a').attr('href') + ')'
);

Answer 2

You can get the attribute of that hyperlink, and apply it to the element with jquery.

var imgHref = $(".nobr nobr a").attr("href");
$(".imageBg").css('background-image','url('+imgHref+')');

working example

Note: Please ensure the class names are unique

Answer 3

There is no way to do it dynamically with pure CSS.

In pure CSS you can do it only statically:

your-selector {
    background-image: url("static-value");
}