CODEWITHSUNDEEP
css
Chapsterj
Chapsterj

Reputation: 6625

Why will element not repeating on inner div

http://jsfiddle.net/sMMHW/

In the fiddle above I have a small little red 1 pixel line that I want to repeat on the y of the inner block but its not repeating. I have my background set to 

.innerbox{
    height:100px;
    background: url(http://www.artaholic.com/html/jsfiddle/img/grid-sprite.png) repeat-y -56px 0;
}

Upvotes: 0

Views: 46

Answers (2)

Andrew
Andrew

Reputation: 13853

It is repeating, however your image is greater than 100 pixels tall so you can't see the red line repeat. You can see this by increasing the height to 500 pixels or something. The red line will show up every few hundred pixels.

To correct this make the red line in your image the full height of the image.

jsFiddle of what I'm talking about.

Upvotes: 3

Madara's Ghost
Madara's Ghost

Reputation: 174977

Problem

It's caused because the line is not the full size of the image. Which causes the image to repeat, but all of the image repeats, and not just the line.

Solution

Make a new image which will be the line and the line alone. You can even use Data URIs to save the requests.

Good luck :)

Upvotes: 0

Related Questions