Buongiorno Ragazzi

io Avrei la necessità di visulalizzare un immagine di sfondo differente sulla risoluzione Mobile 320x480.

Quindi mi sono preparato una foto 320x480

La foto non è caricata dal body, ma da un div perchè ho anche la necessità di aggiungere una Caption con del testo in basso.

Quindi questa è la mia struttura
codice:
<body style="border::0; margin:0; padding:0;">
<div class="caption">
   <img src="img/home.jpg"/>
   <span>
      <a href="indexhome.php"><strong>Entra nel Sito</strong></a>
   </span>
</div>
Ora nella media query: min width:320 and max-width:479

ho il segunte codice che mi visualizza l'immagine adattata, ma come ho già detto io ho la necessità di mostrare solo in questa risoluzione un altra foto.

il CSS
codice:
@media screen and (min-width:320px) and (max-width:479px;) 
{
	
	.caption img {
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
	width:100%; 
	height:auto;
	
}
	.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
     
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}
}
Potete Aiutarmi?