CODEWITHSUNDEEP
css
user759235
user759235

Reputation: 2207

use css to repeat background image to certain position bottom

Not sure if there's an trick to do this but I am looking for a way to basically use CSS to repeat a background image(repeat-y) to a certain point at the bottom of the element like 80 px.

I really hope there an way to do this.

.rep-img {
    background-position: center left;
    background-repeat: repeat-y;
    background-image: url('../images/image.png');   
    background-repeat-y-stop: 80px; /* made up property */
}

Upvotes: 0

Views: 602

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 220136

Put the background on a pseudo element:

.rep-img {
    position: relative;
}

.rep-img:before {
    content: '';
    background: url('../images/image.png');
    position: absolute;
    top: 0; right: 0; left: 0;
    bottom: 80px;
    z-index: -1; /* to push it behind any content in .rep-img */
}

Here's the fiddle: http://jsfiddle.net/T7JBx/

Upvotes: 2

Related Questions