Как я могу повторить изображение в CSS3 с несколькими фонами?

Question

Я работаю над проектом, в котором я должен поместить изображение кривой на фоне контейнера. Я использую три изображения для этого - я использую верхнее изображение, среднее изображение, которое можно повторить по оси Y, и нижнее изображение. Проблема заключается в том, что ширина контейнера (1028 пикселей) фиксирована, а высота увеличивается.

Итак, среднее изображение появляется поверх нижнего изображения контейнера, которое выглядит как this .

Но я хочу, чтобы это выглядело как это .

Вот мои главные, средние и нижние изображения:

• сверху изображение
• середины изображения
• снизу изображение

Я использую свойство CSS3 для нескольких фоновых изображений.

HTML:

<div class="map clearfix">
      <div class="mpbg"></div>
</div>

CSS:

.map {
  float: left;
  background:url("../../img/mpbg-bt-1028-205.png") no-repeat left bottom, url("../../img/mpbg-top-1028-205.png") no-repeat left top;
  margin: -30px 0 20px 0;
  z-index:999;
  width: 1028px;
}

.map .mpbg {
  float: left;
  margin:10px 0 20px 0;
  background: url('../../img/googlemap-996-380.jpg') no-repeat 17px 0, url("../../img/mpbg-mid-1028.png") repeat-y;
  width: 1028px;
  height: 380px;
}

Answer 1

Фоны не предназначены для такого стиля в CSS3, это всего лишь взлом из дней 2.1 CSS. Вместо этого используйте border-image http://css -tricks.com / понимание-border-image /

Answer 2

Нужно ли увеличивать высоту контейнера, если он будет содержать карту?Трудно сделать расширяемый ящик неправильной формы, как требует ваш дизайн.

Я думаю, что вам лучше всего дать средней части вашего ящика минимальную высоту, равную суммарной высоте верхнего и нижнего изображений:

.map .mpbg {
    min-height: 410px;/* Insert the actual correct value here */
}

Это не будет работать в IE 6, но в IE 6 свойство height фактически работает так же, как min-height, поэтому в таблице стилей IE 6 добавьте это правило:

.map .mpbg {
    height: 410px;/* Works around lack of support for min-height */
}