0

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!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Zhongqian Chen
  • 3
  • 2
  • Please post your HTML structure. Are you sure the container element with the background-image is the one growing in size? – skyline3000 Mar 12 '21 at 01:22
  • You can use the background-repeat property. Since you want to it to repeat on the y-axis, you could use background-repeat: repeat-y; – nad Mar 12 '21 at 01:23
  • @nadz The default value for background-repeat is to repeat in both directions, that's not the issue unless the OP explicitly changed it. – skyline3000 Mar 12 '21 at 01:24
  • @skyline3000 You're' right. Then the most likely issue is that the children are overflowing the parent hence the parent. – nad Mar 12 '21 at 01:29
  • OP, if the children inside corkboard is using a float property, make sure you use clear both to make sure the parent gets the height of the children rather than the initial min-height property you've set. – nad Mar 12 '21 at 01:32

2 Answers2

1

There's the background-repeat property; common values are

Repeat on both x and y axis

background-repeat: repeat;

Repeat only on the x axis

background-repeat: repeat-x;

Repeat only on the y axis

background-repeat: repeat-y;

Do not repeat at all

background-repeat: no-repeat;
a.mola
  • 3,883
  • 7
  • 23
  • This doesn't answer the OP's question - this is just copy and paste from MDN – skyline3000 Mar 12 '21 at 01:23
  • Sorry man... I typed it myself but searched for the MDN link. Besides, the OP asks how to repeat a `background-image` and I dont see how this doesn't answer that. – a.mola Mar 12 '21 at 01:25
  • @a.mola Thank you! But I had tried this before, it still does not automatically repeat after the div size had changed. That's why I'm posting this question, because common solution didn't seem to work... – Zhongqian Chen Mar 12 '21 at 01:32
  • Okay then... My bad @nadz has a good point about the overflowing of the parent – a.mola Mar 12 '21 at 01:36
1

Assuming you are using the float property on the children, you could do this.

HTML Structure

<div id="corkboard">
    <div class="corkboard__child">a</div>
    <div class="corkboard__child">b</div>
    <div class="corkboard__child">c</div>
    <div class="corkboard__child">d</div>
    <div class="corkboard__child">e</div>
    <div class="corkboard__child">f</div>
    <div class="corkboard__child">g</div>
    <div class="corkboard__child">h</div>
    <div class="corkboard__child">i</div>
    <div class="clear--both"></div>
</div>

CSS

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

.corkboard__child {
    width: 200px;
    height: 200px;
    float: left;
}

.clear--both {
    clear: both;
}
nad
  • 1,068
  • 6
  • 16
  • 1
    Thank you so much!!! Although my code is not fixed like this (it uses JS to add a child every time when the user clicks a button), but I still manage to write some JS to add this clear--both class at the end of the div every time, and it works! – Zhongqian Chen Mar 12 '21 at 02:03
  • @ZhongqianChen You're welcome. Please mark the question as answered if it is accepted. :) – nad Mar 12 '21 at 02:10