div의 위와 아래에 배경을 모두 표시 하시겠습니까? #multiple background-position

이 작은 회색 사각형 (빨간색 원)을 모두 축소판의 상단 n 하단에 표시해야합니다 (btw이 div는 2 줄 또는 3 줄의 축소판 그림을 나타낼 수 있습니다)div의 위와 아래에 배경을 모두 표시 하시겠습니까? #multiple background-position

사진 :

여기

2x borders?

이다는 기압의 모습에 내 코드 :

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

쉽게이 효과를 달성 할 수 있습니까? 축소판 목록의 길이를 확인하고 그에 따라 특정 배경 그림을 사용하는 ifequal 태그를 만드는 방법을 생각했지만 어쩌면 html/css만을 사용하여이 작업을 수행 할 수 있습니까? 물론

2012-02-11 mymlyn

당신은 CSS3 Multiple Background Images을 활용할 수 있습니다

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

은 background-repeat 속성을 설정 특정 시나리오에 맞게 :

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

을이 supported in 모든 최신 버전입니다 주요 브라우저 :

2012-02-11 23:12:53 xandercoded

background-repeat : no-repeat; 귀하의 코드에 그것은 완벽하게 작동합니다, 고마워, 구글은 아무것도 물었을 때 유용한 반환하지 않았다 :) – mymlyn

당신이 외부 사업부와 배경을 커버 내부 일을 할 수 있습니다, 그래서 당신은 배경을 repeat-y 수)

2012-02-11 23:10:05 Luis

답변