Menu
I'm trying to create a page in which the background image covers it without repeating or expanding beyond the window. It is now cut off at the bottom.
I have tried using viewport sizes, percentages, and cover, but it either repeats or gets cut off and leaves almost half of the window totally white.
html, body {
margin:0;
padding:0;
width:100%;
height:99vmin;
overflow:hidden;
}
body {
font-family:verdana, arial, sans-serif;
font-size:76%;
}
#background {
position:absolute;
z-index:1;
width:100%;
height:100%;
background-image: url(https://i.imgur.com/OON2Kz3.jpg);
background-size: cover;
}
#quotes {
text-decoration: none;
padding-top: 30%;
padding-right: 20%;
padding-left: 20%;
margin: auto;
position: absolute;
text-align: center;
color: beige;
font-size: 36px;
}
.button {
position: absolute;
z-index: 1000;
margin: 50%;
text-align: center;
}<body>
<div id="background">
<div id="quotes">
<p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>
<p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>
<p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>
</div>
</div>
<button class="button">Thus Spoke Nietzsche</button>
<script src="randomize.js"></script>
</body>
322
asked Dec 11 '25 02:12
try this with img
#background{
position:absolute;
z-index:1;
width:100%;
height:100%;
}<body>
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With