Question

Example – I have an element like this:

<div class='playerId'>1001</div>

And I want to style it with a background image whose URL is derived from the contents of the element itself (based on a naming convention):

.playerId  
{  
    background-image: url('/images/userAvatars/' + [INNERTEXT] + '.jpg');  
}  

(I know this concatenation is not legal; it’s pseudocode representing what I’m trying to do.)

Answer 1

You will need to do this with scripting. CSS cannot do it alone.

You could use jQuery to make it happen, something like

var a = $('.playerId').text();

$('.playerId').css('background-image','/images/userAvatars/' + a + '.jpg');

Sidenote: I would consider using IDs (#) instead of classes (.) for the elements if you wanted them to be unique.