Question

i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)

Picture:

here is my code for how it looks atm:

.jq_thumbnails {
    background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
    overflow: auto;
    height: 100%;
}

Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?

Answer 1

You can leverage CSS3 Multiple Background Images:

.jq_thumbnails {
    background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
    background-position: 0 0, 0 bottom;
}

Set the background-repeat property to suit your particular scenario:

background-repeat: repeat-x, repeat-x;

This is supported in all current versions of the major browsers: