CSS3: set background image to rel attribute value

Question

I'm looking to set the background-image (or even render an image via the pseudo elements :after or :before) to the value, which will be a URL, of a rel attribute, but only in certain cases (this is a cloud file listing). For example:

HTML:

<div class="icon ${fileExtension}" rel="${fileURL}"></div>

It would be great if I could do something like this:

CSS:

.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url);  }

... but obviously that doesn't work as, if I'm not mistaken, the attr() CSS function only works inside pseudo element blocks.

I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.

Also, I don't want to explicitly set the background image to the URL or create an <img> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.

Answer 1

Using

.icon:after{ content: ""attr(rel)""; }

displays the rel value as text.

A jQuery solution is to add the background-image (taken from the rel value) as inline CSS:

jQuery(function($) {
    $('.icon').each(function() {
        var $this = $(this);
        $this.css('background-image', 'url(' + $this.attr('rel') + ')');
    });
});

Answer 2

I've tried to do something using jQuery but i don't exactly understand what you want so i can't go on with my code. So far i've done only this.

EDITED I hope it's exactly what you need

$(function(){
    var terms = new Array('png','jpg','jpeg','bmp','gif');

    $('.icon').each(function(){
        var t = $(this),
            rel = t.attr('rel'),
            cls = t.attr('class');

        cls = cls.split(' ');

        for (var i=0; i < terms.length; i++) {
            if (terms[i] == cls[1]) {
                t.css('background-image','url('+rel+')');
            }
        }
    });
});

if you can give me a better example, to undestand exactly what you want, i hope somebody from here will be able to solve your problem.

Regards, Stefan