开发者

Why will element not repeating on inner div

开发者 https://www.devze.com 2023-03-28 10:56 出处:网络
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.

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


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.


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 :)

0

精彩评论

暂无评论...
验证码 换一张
取 消