[ad_1]
I’ve a background picture for a webpage that’s too massive, and generally, I wish to forestall scrolling on the webpage. The HTML appears like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Take a look at</title>
<hyperlink href="type.css" rel="stylesheet" />
</head>
<physique>
<div id="header">
Take a look at
</div>
</physique>
</html>
and the CSS appears like
html, physique {
peak: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
physique {
background-image: url("bg.jpeg");
background-size: cowl;
background-clip: padding-box;
show: desk;
}
This code largely achieves the specified impact (background picture appears good and scrolling is prevented); nevertheless, in iOS Safari, the overflow: hidden; (which prevents scrollbars/scrolling) appears to introduce ~1px of white house round the suitable and backside of the show space. I can eliminate the margin by doing one thing like padding: 1px as a substitute of padding: 0, however then the scrollbars come again. Any concepts on tips on how to eliminate this small whitespace whereas nonetheless stopping scrolling?
I attempted including a wrapper <div> for all of the <physique> content material and setting the background and overflow properties on the <div>, however nonetheless did not have luck (both acquired scrollbars or the odd small margins on backside and proper).
[ad_2]
