My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px.
Please refer to the image:
Here is the snippet of my code:
HTML:
<body style="background:url(assets/img/back-body-base.jpg); background-repeat:no-repeat; background-size:cover;">
<div class="container-fluid">
<div class="row">
<nav class="col-lg-1" style="background-color:#2C2B2B;padding-bottom: 100%;margin-bottom: -100%;"></nav>
<div class="col-lg-11" style="overflow: hidden">
<div class="row">
<header>
<div align="center" class="position-header">
<a href="index.html">
<div>
<img src="assets/img/logo.png" height="25%" width="25%"/>
</div>
<div class="p-top-10">
<img src="assets/img/sublogo.png" width="25%" height="25%"/>
</div>
</a>
</div>
</header>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-11">
<div class="p-top-50"></div>
<div class="row">
<div class="col-lg-11">
<div class="row">
<div id="monday" class="dayfloat daybutton-first w-200 dayList" data-type="day" data-daycount = "1" tabindex="1">Mondat</div>
... (content continues) ...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.p-top-10 {
padding-top: 10px;
}
.p-top-30 {
padding-top: 30px;
}
.p-top-50 {
padding-top: 50px;
}
Additional Information:
- I have implemented a keydown event using
jQueryto navigate between<div>elements.- The resolution of 'back-bode-base.jpg' is 1798px*1080px.
Any assistance on this matter would be greatly appreciated. Please help!