CSS3: set background image to rel attribute value

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.

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') + ')');
    });
});

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

I've decided to go the jQuery route, and used a combination of @ryanve and @stefanz answers. Thanks guys

$(document).ready(function() {
    $(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) {
        var bg = 'url(' + $(this).attr("rel") + ')';
        $(this).css('background-image', bg);
    });
});

I think this is relatively neat/concise and works well for my needs. Feel free to comment on efficiency, methodology, etc.