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

Question

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

#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-запросов. изображение в 1 пиксель, вероятно, не окажет большого влияния, но я просто хочу попробовать. кто-нибудь может помочь?

Answer 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;
}

Answer 2

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

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

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

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