CSS: позиционирование изображения относительно фонового изображения

Question

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

Как изображение логотипа и изображений меню в соответствии с размером экрана, а фон просто повторяется, я не могу заставить его работать на оси y - любая идея, как это сделать?

Страница sarahreesbrennan-fans (dot) com - вы поймете, что я имею в виду, если вы посмотрите. (это просто посмотреть, о чем я говорю, если кто-то не может представить это из описания).

Мой код страницы:

<div id="bg_wrapper"><img src="/wp-content/uploads/2013/08/floral.png" /></div> 
<div id="logo"><img src="/wp-content/uploads/2013/08/logo1.png" width="50%" /></div> 

И CSS:

body { 
color: #444444; 
font-family: verdana, sans-serif; 
font-size: 10pt; 
background: url(/wp-content/uploads/2013/08/page-back.gif) repeat-x #22221f; 
} 
#bg_wrapper { 
position:absolute; 
z-index:-1; 
width:100%; 
text-align:center 
} 
#logo { 
padding-top: 3%; 
padding-left: 3%; 
} 

Спасибо большое!

Answer 1

Хитрость заключается в том, чтобы сделать div правой высотой и центрировать изображение по вертикали в div.

#logo { 
    padding-top: 0; 
    padding-left: 3%; 
    height:128px; line-height:128px; 
} 
#logo img {vertical-align:middle;} 

См. Это Fiddle.

(Обратите внимание, что в скрипке я также удалил width:100% из #bg_wrapper, как это имело эффект вызывает горизонтальную полосу прокрутки появляться даже тогда, когда окно было достаточно широким.)