CSS背景位置使用多个背景

Question

Currently I am using multiple backgrounds to create panel with fixed top and bottom images, and center image to reapeat vertically, as content continues.

<div style="
background-image: url(top.png), url(center.png), url(bottom.png);
background-position: top, center, bottom;
background-repeat: no-repeat, repeat-y, no-repeat;
width:242px;
">
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg
</div>

The problem I encounter is that using no-repeat, repeat-y, no-repeat bottom image is SKIPPED. Center image repeats itself to the end!

I need to figure out (and do it elegantly, cleanly) how make middle part repeat itself by axis y, but also to leave space for bottom part to end my div block nicely.

Thanks!

Answer 1

Probably the problem comes from the center image occupying all the space.

Since it is layered above the bottom, it makes it not visible.

Just change the order: repeating image in the first rendered layer (the last one in the list !) then the other 2

background-image: url(top.png), url(bottom.png), url(center.png);
background-position: top, bottom, center;
background-repeat: no-repeat, no-repeat, repeat-y;

Demo

Answer 2

The images are placed as floats. When you place top image then centre image, it covers the spaces available, leaving no space for the bottom image.

Thus, changing the order works very well. The top and bottom images are placed with no-repeat then the remaining spaces are filled with centre image with vertical repetition.