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.

Please provide a not working sample :D -- My sample works: http://jsfiddle.net/JYxB6/ — Smamatti, Nov 21 '13 at 18:25
I have created a fiddle.Is this what you want? :-> http://jsfiddle.net/jpLUR/1/ — Zword, Nov 21 '13 at 18:27
The DIV has a `height:100%` but I want only the background image stop repeating at `height 400px`. — lickmycode, Nov 21 '13 at 18:32

Venu immadi · Accepted Answer · 2013-11-21T19:43:11.743

2

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

edited Nov 21 '13 at 19:43

answered Nov 21 '13 at 18:30

Venu immadi

1,585
11
20

Hi Venu, I think this is not exactly what I am looking for. I've updated my question, so hopefully it is more understandable now what I am planning. – lickmycode Nov 21 '13 at 19:01
you can add height to .yourclass:after and youcan stop it at which position you want and also you add values for top position. – Venu immadi Nov 21 '13 at 19:10
Exactly, your answer is correctly! Sorry but your jsfiddle demo irritated me since it differs from your answer here. Thanks for your help! – lickmycode Nov 21 '13 at 19:33

score 1 · Answer 2 · answered Nov 21 '13 at 19:59

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! =)

css background image repeat until specific height

2 Answers2