CSS垂直重复背景

Question

I can't seem to figure out how to vertically repeat a background image on a <div> here's my code.

http://jsfiddle.net/pedenski/Sw6wB/

what im trying to accomplish here is to put a shadow effect on the side of the page. similar with the http://www.adobe.com/ website. you'd see a shadow border on both sides.

Answer 1

You just have no height for your left and right divs.

See this updated JS fiddle.

I've added height:100px; just to show that it works

div#right {
    background-image:url(http://i45.tinypic.com/ejv8uq.png);
    background-repeat: repeat-y;
    width:100px;
    height:100px;
    float:right;
}

and here is a fix for left block( background-position:top right; and height):

div#left {
    background-image:url(http://i47.tinypic.com/2hsc187.png);
    width:100px;
    height:100px;
    float:left;
    background-repeat: repeat-y;
    background-position:top right;
}    

Answer 2

Write it as -

div#left {
    background:url(http://i47.tinypic.com/2hsc187.png) repeat-y left top;
    width:100px;
    float:left;
}

Demo

Answer 3

Use background:url(http://i47.tinypic.com/2hsc187.png) right top repeat-y;

here is the demo http://jsfiddle.net/Sw6wB/13/

Answer 4

Depending on this tag, the image might repeat in horizontal or vertical or both directions.

It takes any of the following values:

• repeat : This value tells the image to be repeated in both directions

• repeat-x : This value tells the image to be repeated in vertical direction only

• repeat-y : This value tells the image to be repeated in horizontal directions

• no-repeat : This value tells that the background image should not be repeated

For example: repeat-x will work for repeating a vertical background.

Answer 5

采用：

background-repeat: repeat-y;

Answer 6

To repeat background vertically you can use background-repeat: repeat-y; But your CSS is not good to display that in fiddle.

I 'll suggest to use box-shadow for such things.