Is there any way to let HTML background image auto repeat even after height changes?

I'have a question about HTML's background image styling. As the title says, how could I, if possible, let a div's background image keep on repeat even after div's height changed?

For example, I have this div:

#corkboard {      background-image: url('images-2/corkboard.jpg');      min-height: 500px;  }  

The background image corkboard.jpg is only a 340 * 340 sized square that look like this, when it got imported into corkboard div, it automatically repeats and filled up min-height: 500px part, which the webpage now look like this.

However, when I add child elements to corkboard, and the div height automatically extends way longer than min-height: 500px, the background image does not keep up repeating and fill up the new height, it just always stays at min-height: 500px, the same as how it was initially, and look like this.

I know how cover works, but that's not what I want to do, because cover stretches that one image to cover the whole background, and make the quality bad. I'm seeking for a way to keep the auto repeat updating with the new div size. Thank you so much for your help!

Solved by @nadz:

The reason why this is happening, is because both the parent and child elements are having float . Thus, for the parent div to correctly update the height, it needs to be clear: both first. By creating another div with the class having clear: both in it after all the child elements inside corkboard (the end of corkboard), the height will be updated, and the background image will keep up repeating.

https://stackoverflow.com/questions/66592738/is-there-any-way-to-let-html-background-image-auto-repeat-even-after-height-chan March 12, 2021 at 09:01AM