Mobile Safari CSS3 / JS

Hey Guys,

Just wanted to point something that I tried out with some good success.

Mobile Safari supports multiple background images.

I kind of wondered when I would get around to actually wanting them, but then it came up in this project I was doing that involved creating a sortable table. I have an up arrow and a down arrow and want them to both appear on an unsorted table and then for only one to appear once the table has been sorted. I am using JQuery tablesorter for my sorting by the way, which works great on mobile. This is a mobile web app that supports the "web clip" option for saving to the mobile desktop, which means everything is loaded through ajax. Anyway, here is some code showing how this works and why it's userful.

#list table thead th {
 background-color: #777;
 background-image: url('images/up.png'), url('images/down.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 98% 33%, 98% 66%;
 width: 50%;
 text-align: left;
 padding: 8px 20px 8px 8px;
 color: #ccc;
 font-size: 11px;
}

#list table thead th.headerSortDown {
 background: #777 url('images/down.png') no-repeat 98% 50%;
}

#list table thead th.headerSortUp {
 background: #777 url('images/up.png') no-repeat 98% 50%;
}

Links:
JQuery Tablesorter Plugin
CSS3 Multiple Background images