Q:

Use jQuery to set background-image of div based on "name"

Basically, have a portfolio site I'm working on, with upwards of 15 pieces in it. Would like to be able to use the "name" selector that I'm currently already using to show the pieces (i.e. slide the min) to set the background of the thumbnail div without having all the CSS markup manually done. Might be confusing to explain, maybe this code I worked up (that isn't working) could help.
Here's the actual thumbnail HTML:
<a name="allies" class="portbox port-link allieslink">
    <div class="port-info">
        <h3>Creative Allies</h3>
        <p class="port-label">Product</p>
        <p class="port-detail">Print Design</p>
        <p class="port-label">Year</p>
        <p class="port-detail">2010</p>
     </div>
</a>

As of right now, that "allieslink" class has this in the CSS:
.allieslink {
    background: url(IMG/portfolio/allies-link.jpg) center top no-repeat;
}

So what I want to do is take out the manual CSS - have the jQuery calculate based on the "name" setting, then plug in that same name selector (with "-link.jpg" added) as CSS.
Here's my current jQuery code (inside a document ready function):
var artname= $(".port-link").name;
$(".port-link").css("background","url(IMG/portfolio/" + artname + "-link.jpg) center top no-repeat;");

Obviously, this isn't working. I'm not exactly sure why, as I feel like I'm on the right path, it's probably something dumb in there. Just trying to figure out the exact jQuery to make it work right. Help?
(As of right now, have classes in CSS for all of the elements, but you can imagine that as the portfolio grows, this will get quite long.)

A:

To retrieve the value of name attribute use
var artname= $(".port-link").attr('name');

Or
 var artname= $(".port-link")[0].name;

You can retrieve the value of  name attribute this way. But this will not solve your problem Entirely. In that case you have to loop through the links and set background for each of them. You can use .each() to do that or even better you can take advantage of the implicit looping of .css() method like this.
$(".port-link").css("background",function(){
   return "url(IMG/portfolio/" + this.name + "-link.jpg) center top no-repeat";
});

And if you want the background to be positioned center bottom on hover then you can do that using jQuery like this.
$(".port-link").hover(function(){
     // hover in set background position for hover
     $(this).css('background-position','center bottom');
 },function(){
     // hover out reset background position
     $(this).css('background-position','center top');
 });

And remove the hover css.

