CSS: Можно ли повторить только часть изображения, чтобы использовать его в качестве фона?

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

#content_top { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll;
    height: 10px;
}

#content_bottom { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll;
    height: 10px;
}

то я использую другое изображение высоты 1px, чтобы повторить вертикально, чтобы заполнить область между ними для этого фона div. например:

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll;
}

Теперь я задаюсь вопросом, можно ли просто использовать одно и то же изображение (content_top_bottom.png), но только его часть, чтобы добиться такого же эффекта? Я попробовал что-то вроде этого, но это не сработало:

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll;
}

Я хочу использовать одно и то же изображение, потому что хочу уменьшить количество HTTP-запросов. 1px изображение, вероятно, не будет иметь большого влияния, но я просто хочу попробовать. любой может помочь?

Ответ 1

Сделайте изображение 2280 x 10, поместив верхнюю, среднюю и нижнюю части рядом друг с другом. Затем вы можете повторить среднюю часть:

#content_top {
  background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll;
  height: 10px;
}

#content {
  background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll;
}

#content_bottom {
  background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll;
  height: 10px;
}

Ответ 2

Я бы предложил использовать 3 изображения по всему сайту:

Стандартные не повторяющиеся спрайты. Это будет content_top_bottom.png в вашем случае (хотя может быть лучше переименовать его, чтобы он был более общим и может использоваться для других частей).
Изображение "repeat-x". Это будет изображение шириной 1px (или немного больше, в зависимости от дизайна), но очень высокое. В этом случае все изображения будут повторяться горизонтально.
Изображение "repeat-y", похожее на # 2, за исключением 1px, высокое и очень широкое. Здесь вы поместите свое изображение content_body.png.

Хотя в вашем текущем случае это приводит к двум HTTP-запросам, оно намного более масштабируемо, потому что вы не будете использовать больше 3. К сожалению, для фонов, разделяющих оба направления, они должны быть индивидуальными.

Вам также может быть интересно узнать о свойстве CSS3, border-image, что позволит вам использовать одно изображение для полного элемент. Он не очень хорошо поддерживается, но, надеюсь, он не будет слишком длинным!