Creating Mobile Header Image

Hi,

Does anyone know how to change the Mobile CSS in tempera so that when I go to a mobile (iPhone etc) it switches the header image to a smaller one.

I have tried using the Site Logo in the Tempera settings but that did not have the desired results.

I have tried adding this line ( in Bold) to the CSS but has had no affect.

Any help would be appreciated thanks.

Glen ??

@media (max-width: 480px) {
body, #content, #content p, #content ul, #content ol,#content code, #content pre, #content blockquote {
font-size: 12px !important;}

#header {
background:url(images/480-header.png;)
}

#site-title span a{font-size: 18px;line-height:20px;}
#site-description { font-size: 11px;line-height:10px;}

.nivo-caption h2 {margin-bottom:0px;font-size:14px;line-height:18px;}

body {padding: 0;}
#page {margin-top: 0;}
.magazine-layout #content article.post, .magazine-layout .search #content article{margin:5px 0;width:100%;}
#front-columns > div { width:auto;max-width:98%;float:none;margin:25px auto !important;clear:both;}
.column-image img {}
}