Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

use css to repeat background image to certain position bottom

use css to repeat background image to certain position bottom

Problem

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 */
}
Problem courtesy of: user759235

Solution

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/

Solution courtesy of: Joseph Silber

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

use css to repeat background image to certain position bottom

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×