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.
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;
}