Как правильно разместить 3 фона для блока?

Question

[Дмитрий Куликов]

Здравствуйте.
Имеется блок, блок тянется по вертикали, и для того чтоб он имел красивый фон решил использовать вот такое вот решение

background: 
url(/image/news_bg_head.png) no-repeat, 
url(/image/news_bg_bottom.png) no-repeat bottom, 
url(/image/news_bg_body.png);

Все вроде бы хорошо, но news_bg_head.png и news_bg_bottom.png немного прозрачные и когда под ними растягивается news_bg_body.png то это заметно сверху и снизу
Вопрос в следующем, можно ли как то сделать так, чтоб news_bg_body.png растягивался не на весь блок, а например на -3px сверху и снизу

Answer 1

[Юрий Лобанов]

попробуйте поколдовать с background-position
А так - всегда можно использовать вложенные блоки.

Comments

[Дмитрий Куликов]

background-position пытался применить но не очень понял как это делать когда задано несколько фоновых картинок, а применить надо только к одной

[Юрий Лобанов]

так через запятую. Вы разделите на
background-image:
url(),
url(),
url();
background-position:
left,
left bottom,
left 0px top 3px;

ну и репит не забудьте прописать.

[Дмитрий Куликов]

Может я делаю что то не так. но jsfiddle.net/fmphF Фон вроде как должен съехать на 10 пикселей вниз, а он остается на месте

[Сергей Протько]

background-position работает только для картинок.

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/fmphF/2
Видите ли, при повторе по y нет смысла отодвигать картинку, так как она отодвигается, но сверху идет строка предыдущей картинки. На примере все видно.
Ваш пример с цветом - ему ваще до лампочки background-position, смотрите пятый блок.
Если Вам надо повторять news_bg_body.png, то ничего не выйдет - делайте с вложенными дивами.
Ну или ждите, может кто-то другое решение подскажет.

Answer 3

[Graph]

проще сделать bg_top и bg_bottom больше размером на 3px добавив просто полоску снизу и сверху соответенно

Answer 4

[Евгений Питаев]

Попробуй такой способ

Comments

[Юрий Лобанов]

@jDeuterium а у него каким способом сделано? Вы вопрос читали?