Положение фона - помогите сделать?

[d0ublezer0]

http://leveler.ru/popukaki/

 

На втором этаже в правой колонке есть фоновая картинка, которая должна выглядеть как-то так:

Прижата к нижней части , выровнена по центру правой колонки, при этом находится за текстом.

 

Как такое возможно сделать? Чтобы при масштабировании окна картинка не наезжала на среднюю часть, а была за ней, и была спозиционирована по центру правой колонки?

 

P.S. Все картинки временные, нормальные еще не отсняли.

Edited April 16, 2014 by d0ublezer0

[alex.kv]

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

[Светлана Г.]

Можно поместить текст в одну колонку, а картинку - в другую колонку. И позиционировать картинку: background-position:50% 100%.

[d0ublezer0]

Можно поместить текст в одну колонку, а картинку - в другую колонку. И позиционировать картинку: background-position:50% 100%.

Колонка имеет ограниченный размер по ширине. Фон будет обрезан по ее границам.

 

Если вешать на задник слоя .wrap и позиционировать по нему (он фиксированной ширины) то опять же правый край бед обрезан.

Если вешать фон как сейчас, на .line2 - то этот слой тянующийся и фоновая картинка скачет по горизонтали при масштабировании окна.

[Светлана Г.]

Вот так: http://jsfiddle.net/SvetaGr/YBNBX/

[d0ublezer0]

Светлана, в вашем варианте во первых, используется масштабирование фона, что поддерживается не всеми браузерами, а во вторых в этом случае изменяется размер фоновой картинки, что не допустимо.

 

Спасибо, что участвуете.

[Светлана Г.]

http://jsfiddle.net/SvetaGr/YBNBX/3/

[d0ublezer0]

Светлана, спасибо.

Но предложенное решение мне известно и, к сожалению, не подходит.

Мы опять же имеем в этом случае ширину колонки, равную ширине фонового изображения, в то время как фоновое изображение должно частично "заходить" под среднюю колонку.

Плюс в таком варианте, мы жертвуем шириной средней колонки.

[d0ublezer0]

Остается пожалуй один вариант - делить картинку на две части. Левую часть класть в слой .wrap и прижимать к правому краю.

Правую часть класть в слой-родитель и смещать от центра на ширину половины .wrap

Тогда всё получится.

 

Но решение, на мой взгляд, корявое.

Просто поменять картинку уже не получится, ее снова надо будет резать и вычислять размеры ее кусков.

 

Буду признателен, если уважаемые советчики предложат более грамотный вариант.