css background image repeat until specific height

Question

Is there a CSS way to stop a repeating background image at a specific position?

HTML:

<div class="container bgimage">
   This is the content
</div>

CSS:

.container
    {
      height:100%;
    }

.bgimage
    {
      background-image:url('bg.png');
      background-repeat:repeat;
    }

I want to repeat the image horizontally and vertically at position 0 and stop repeating when the repeating image is reaching vertical height: 400px, like a max-height but only for the background and without shrinking the .container DIV.

I know how this can be done with gradient backgrounds, but is there also a solution for repeating image backgrounds when the .container DIV is even higher than 400px?

Example CSS Gradient:

linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 400px) repeat fixed 0 0 rgba(255, 255, 255, 0)

...

Now I want to do the same with an image, and stop it at 400px.

Answer 1

hope it will help you

.youclass:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(path/image.png) repeat-y;
}

demo