中心的背景图像截止

所以我创建了旨在扩展到移动设备中心的背景图像截止

http://follow.sueu.org.au/

它好工作我的旧的Android手机上，但不工作的更现代的智能手机一个网站（ Iphone和Android）都使用Google Chrome。

问题是，在主页上背景图像是移动设备屏幕的一半。

http://s23.postimg.org/4hozcopsb/photo.png

我在CSS很业余的，我敢肯定有一些简单，我已经做错了，但我不能弄明白。

<html> 
<head> 
<title>The Story of Love</title> 

<meta name="viewport" content="width=device-width;"> 

<style> 

    #wrap { 
     width: 500px; 
     margin: 0 auto; 
    } 

    body 
    { 
    background-image:url('Images/Title_BackgroundImage.jpg'); 
    background-repeat:no-repeat; 
    background-position: top center; 
    background-size:500px; 
    background-color:#4e4943; 
    } 

     .introduction { 
     position: top center; 
     top: 0px; 
     left: 0px; 
     height: 227px; 
     width: 500px; 
    } 
     .introduction a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .love { 
     position: top center; 
     top: 227px; 
     left: 0px; 
     height: 90px; 
     width: 500px; 
    } 
     .love a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .gather { 
     position: top center; 
     top: 317px; 
     left: 0px; 
     height: 94px; 
     width: 500px; 
    } 
     .gather a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .relate { 
     position: top center; 
     top: 411px; 
     left: 0px; 
     height: 91px; 
     width: 500px; 
    } 
     .relate a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .witness { 
     position: top center; 
     top: 502px; 
     left: 0px; 
     height: 79px; 
     width: 500px; 
    } 
     .witness a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .love2 { 
     position: top center; 
     top: 581px; 
     left: 0px; 
     height: 125px; 
     width: 500px; 
    } 
     .love2 a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 


@media screen and (max-width: 480px) 
    { 

    #wrap { 
     width: 320px; 
     margin: 0 auto; 
    } 

    body 
    { 
    background-image:url('Images/Title_BackgroundImage_Mobile.jpg'); 
    background-repeat:no-repeat; 
    background-position: top center; 
    background-size:320px; 
    } 

    .introduction { 
     position: top center; 
     top: 0px; 
     left: 0px; 
     height: 145px; 
     width: 320px; 
    } 
     .introduction a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .love { 
     position: top center; 
     top: 145px; 
     left: 0px; 
     height: 50px; 
     width: 320px; 
    } 
     .love a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .gather { 
     position: top center; 
     top: 203px; 
     left: 0px; 
     height: 60px; 
     width: 320px; 
    } 
     .gather a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .relate { 
     position: top center; 
     top: 264px; 
     left: 0px; 
     height: 61px; 
     width: 320px; 
    } 
     .relate a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .witness { 
     position: top center; 
     top: 323px; 
     left: 0px; 
     height: 51px; 
     width: 320px; 
    } 
     .witness a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 

    .love2 { 
     position: top center; 
     top: 372px; 
     left: 0px; 
     height: 78px; 
     width: 320px; 
    } 
     .love2 a { 
      display: block; 
      width: 100%; 
      height: 100%; 
     } 
    } 
</style> 
</head> 

<body> 
<div id="wrap"> 

<div class="introduction"> 
<a href="Introduction/Introduction.html"> 
</a></div> 

<div class="love"> 
<a href="Chapter1/Chapter1_Title.html"> 
</a></div> 

<div class="gather"> 
<a href="Chapter2/Chapter2_Title.html"> 
</a></div> 

<div class="relate"> 
<a href="Chapter3/Chapter3_Title.html"> 
</a></div> 

<div class="witness"> 
<a href="Chapter4/Chapter4_Title.html"> 
</a></div> 

<div class="love2"> 
<a href="Chapter5/Chapter5_Title.html"> 
</a></div> 

</div> 
</body> 
</html>

来源

2013-08-30 user2731923

#wrap { 
    width: 500px; 
    margin: 0 auto; 
}

例如在iPhone上，你会看到它几乎在板缺一半因为它具有320像素的宽度。你应该加上类似的东西：

@media screen and (max-width: 320px){ 
     #wrap { 
     width: 320px!important; 
     } 
}

来源

2013-08-30 07:46:40 Vladimir

中心的背景图像截止

回答

相关问题