I want the background image to repeat over the whole page height and width. If I have enough content that you need to scroll, then the background repeats the whole page to the end and leaves no gap. But if there's not much content the background stops repeating just under the content and leaves the rest of the page below it blank.
CSS:
body {
background: url("https://via.placeholder.com/100.jpg");
background-size: 100px 100px;
background-repeat: repeat;
background-position: top;
}I'm using Bulma CSS. The background-repeat stops three quarters down the page and even if I make the background image 500px x 500px or 100px x 100px it leaves a similar amount of gap. There is no gap horizontal, only vertical.
One way I can get it to work is if I add some padding under the content to make the content larger, but then if someone is using a smaller screen they will be scrolling down to nothing.
How can I repeat a background image full-page and leave no gap?
