css background image repeat until specific height - html

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

Answer 2

Although I don't know if what you're asking for is possible, I have a solution that may work for what you need.
What you can do is create a div outside of your container div that will serve as your 400px high repeated background.
HTML:
<div class="tile-background"></div>
<div class="container">
Hello, Luigi.
</div>
CSS:
.container {
z-index: 0; /* MAKES the container appear on top of other elements */
position: absolute; /* REQUIRED for z-index */
}
.tile-background {
/* REQUIRED FOR Z-INDEX ... positions the div in reference to the window */
position: absolute;
top: 0px; /* positions div's top at the top edge of the window */
left: 0px; /* positions div's left side at the left edge of the window */
width: 100%;
height: 400px;
background-image: url(bg.png);
background-repeat: repeat;
}
Here is a preview of the the code does:
http://jsfiddle.net/Ember_Hawk/WP5Zu/1/
Essentially, you create a div that appears behind all other elements and does not affect their positioning.
If you need the background to start where the container div starts with respect to its position on the y-axis, you just change the "top" attribute of the "tile-background" class.
If you have an element with dynamically changing height that lies above your container, then this really wouldn't work without some help.
Hope I helped! Good luck! =)