Image pleine largeur sans déformation

Bonjour,

Je tiens à dire tout d'abord que je suis débutant en création de site.

Je suis en train de créer un site vitrine (type one page), et dans le design du site, j'aimerais séparer les parties de la page par de grandes images qui prennent toute la largeur de la fenêtre du navigateur.

Pour faire simple, j'aimerais que l'image :

- soit toujours en largeur 100%, peut importe la taille de la fenêtre,
- garde toujours la même hauteur, peut importe la taille de la fenêtre,
- l'image ne soit pas déformée (étirée), mais peut être rognée sur la largeur pour garder la hauteur fixe.

Pour le moment j'ai essayé en ouvrant une div vide avec une image en background:

#section1{
 width:100%;
 background: url(section1.png) no-repeat center fixed; 
   -webkit-background-size: cover; /* pour Chrome et Safari */
   -moz-background-size: cover; /* pour Firefox */
   -o-background-size: cover; /* pour Opera */
   background-size: cover; /* version standardisée */
}

Avec ce code, j'ai bien une image qui ne se déforme pas et qui reste à 100% en largeur, mais je ne sais pas comment fixer une hauteur (quitte à ce que l'image soit rognée en largeur).

Merci d'avance !