ho creato un livello dalle dimensioni 200 x 200px che contiene un'immagine di sfondo posizionata al centro molto più grande 300 x 450px

#livello {
position:relative;
border: 4px;
background-image: url(images/sfondo.jpg);
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 200px;
z-index: 1;
}

ora io vorrei ottenere lo stesso effetto (quindi mantenere visibilmente le dimensioni del layer più piccole dell'immagine di sfondo) con la differenza che l'immagine inserita all'interno del layer non deve essere uno sfondo

se faccio così si balla il div :-(
<div id="livello">[img]images/sfondo.jpg[/img]</div>

come posso modificare il css??