Comment avoir css image d'arrière-plan à l'échelle avec la taille de la fenêtre et de l'appareil

J'essaye de configurer un gabarit que je peux utiliser pour le responsive design, les fenêtres aussi. Mais maintenant, quand j'essaie de redimensionner ma fenêtre de navigateur, il n'est pas à l'échelle et sur mon iphone je viens de voir la partie en haut à gauche de l'en-tête graphique. J'ai un principal wrapper de fond et un en-tête de gif animés qui sont à la fois la même largeur de 1200px. Toute aide serait grandement appréciée.

fenêtre d'affichage

<meta name="viewport" content="width=device-width, initial-scale=1">

css

body {
    background-color: #B28D66;
    margin: 0 auto;
}
#Wrapper {
    max-width:1200px;
    width:95%;
    background-image: url(../img/background_main.jpg);
    background-repeat: no-repeat scroll;
    background-position: center top;
    height: 2200px;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#Wrapper #Banner {
    width: 100%;
    height: 350px;
    background-image: url(../img/animated-gif-header.gif);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#Wrapper #Content {
    width: 75%;
    margin: 0 auto;
}
#Wrapper #MainNav {
    background-image: url(../img/nav_bar.png);
    width: 100%;
    height: 75px;
    margin-top: -20px;
}
#Wrapper #MainNav ul {
    margin-right: 100px;

}

#Wrapper #MainNav ul li {
    float: right;
    margin-top: 15px;
    padding-right: 21px;
Avez-vous essayé de servir des images différentes avec une requête de média pour le téléphone? Il est illusoire de penser que la même image est aller remplir un 1400px large écran de l'ordinateur portable et un 320px écran de l'iphone parfaitement.

OriginalL'auteur Djacksway | 2013-03-23