Html 背景图像高度和覆盖内容溢出并重复

我正试图用无框浏览器将背景图像安装到iPad屏幕上

图像的高度非常适合，但是宽度不适合，并且图像会自动重复，这使得页面可以水平滚动。（我希望它是单页的，并没有重复的图像）。我可以知道如何使图像与宽度相匹配吗

body {
background-image: url("main.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

同时，我有一个覆盖内容，你点击框，内容就会出现。然而，在iPad上，覆盖框离屏幕太大了。覆盖层会影响背景吗？我如何使它适合屏幕

HTML
<!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <img src="tyedit.jpg" />
            <div id="imagine">
                <span id="clicked">0</span><br/>
                <span id="word">VOTES</span>
            </div>
    </div>
    </div>

CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;  
margin: auto;
padding: 0;  
width: 70%;
height: 100%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

HTML
&时代；
0

投票
CSS
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
保证金：自动；
填充：0；
宽度：70%；
身高：100%；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}

如果要取消重复操作。您需要设置

no repeat

参考此链接

试试这个，回答你仍然遇到的问题。我会在这里回答

更新

iOS的溢出问题

-webkit-overflow-scrolling: auto

---

如果要取消重复，请参阅此处。您需要设置

no repeat

参考此链接

试试这个，回答你仍然遇到的问题。我会在这里回答

更新

iOS的溢出问题

-webkit-overflow-scrolling: auto

---

请参阅此处

谢谢，背景重复工作正常！但是，溢出现在是垂直的，图像宽度超过右侧，但没有溢出。您可以发布一个片段吗？因此，我可以清楚地理解@user2728875这是iPad无框浏览器上的屏幕截图：我设法解决了宽度问题，但背景图像仍然可以垂直向下滚动，而不仅仅是在屏幕高度范围内@请把它贴在这里。由于AV@user2728875，我无法打开该链接。我已设法将图像放入屏幕中。您知道如何防止垂直滚动，因为有一些白色多余的空间，允许溢出。（我已经试过overflow:hidden）但它在iPad上似乎不起作用@谢谢你，背景重复工作！但是，溢出现在是垂直的，图像宽度超过右侧，但没有溢出。您可以发布一个片段吗？因此，我可以清楚地理解@user2728875这是iPad无框浏览器上的屏幕截图：我设法解决了宽度问题，但背景图像仍然可以垂直向下滚动，而不仅仅是在屏幕高度范围内@请把它贴在这里。由于AV@user2728875，我无法打开该链接。我已设法将图像放入屏幕中。您知道如何防止垂直滚动，因为有一些白色多余的空间，允许溢出。（我已经试过overflow:hidden）但它在iPad上似乎不起作用@阿克章