背景圖像的高度和重疊內容溢出並重復

Question

我正在嘗試使用無框瀏覽器將背景圖像調整到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
}

Answer 1

如果您想消除重復的話。 您需要設置no-repeat參考此鏈接

w3schools-backgroundrepeat-property

完整的背景教程

div {
    background-image:url(smiley.gif);
    background-repeat:no-repeat;
    background-size: 100%;
}

試試這個，並回答您仍然遇到的問題。 我會在這里回覆答案

更新

iOS溢出問題

-webkit-overflow-scrolling: auto

在這里參考webkit-overflow-scrolling