user2728875 user2728875 - 1 year ago 44
CSS Question

Background Image height and overlay content overflows and repeats

I'm trying to fit the background image onto a iPad screen with a frameless browser.

The height of the image fits perfectly however, the width does not and the image repeats itself which makes the page scrollable horizontally. (I want it to be single page with the no repeat of the image). May I know how do I fit it the image to the width?

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


At the same time, I have a overlay content where you click on the box and the content will appear. However, the overlay box is way too big off the screen on the iPad. Would the overlay be affecting the background? And how would I make it fit within the screen?

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 Source

If you want to dismiss the repeat. You need to set no-repeat refer this link

w3schools-backgroundrepeat-property

full tutorial for background

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

Try this and reply what problem you still encounter. I will reply the answer here

UPDATE

Overflow issue for iOS

-webkit-overflow-scrolling: auto

Refer here webkit-overflow-scrolling

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download