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
Vous devez vous connecter pour publier un commentaire.
essayez d'utiliser le fond de taille propriété de la manière suivante:
ou utiliser le ci-dessous si vous souhaitez avoir à sa hauteur, couvrant l'ensemble de la hauteur de la page
OriginalL'auteur Gaurav Kakkar
fonctionne très bien pour moi.
OriginalL'auteur Erez Henya
Généralement, cela fonctionne très bien.
OriginalL'auteur Sten Pelzer