Image autosize

Bonjour,
je cherche a avoir une image qui fait la longueur de l'écran est une hauteur max de 350px.
cette image doit pouvoir se redimensionner en fonction des écrans.
De plus et c'est la ou je bloque, dans cette image il doit y voir une autre image mais d'une hauteur plus grande max 520px et centré. De même elle doit pouvoir se redimensionner en fonction de l'écran.

<div class="accueil-bg-beton">
	<div class="accueil-bg-appart"><img src="/images/template/promo-accueil.jpg" /></div>
</div>

.accueil-bg-beton{
	background-image: url("/images/template/bg-beton.jpg");
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	margin-bottom: 140px;
	max-height: 375px;
	width: 100%;
}
.accueil-bg-appart{
	background: url("/images/template/promo-accueil.jpg") no-repeat scroll 0 0 transparent;
    max-height: 513px;
	height: 100%;
    margin: 0 auto;
    max-width: 960px;
	width: 100%;
}

Avec ce code l'image du centre ne se redimensionne pas.

Merci de votre aide