Вы неправильно подходите к проблеме. Изображение, отображаемое с использованием тега <img />, является элементом. Это означает, что занимает место. Похоже, вы пытаетесь вставить текст поверх них.
Существует гораздо лучший способ - использовать фоновое изображение для элемента, предназначенного для хранения текста. Из вашего кода похоже, что вы хотите, чтобы три поля были рядом друг с другом. Это включает в себя позиционирование контента. Использование относительного позиционирования, как вы, кажется плохой идеей. Это может сломаться. Потратьте десять минут и прочитайте статью о позиционировании CSS. статические, абсолютные, относительные и числа с плавающей запятой.
Нечто подобное будет работать лучше. Переместите элементы слева так, чтобы они сидели рядом друг с другом. Затем очистите их, когда это будет сделано, чтобы содержимое появилось в нужном месте. Наконец, установите фон, используя свойство css url. В этом случае я просто вставил цвета, но оставил в синтаксисе, где вы можете указать изображение, если хотите.
http://jsfiddle.net/FUZDW/
div { height: 50px; width: 100px; border: 1px solid black; }
div#menu1 { background: red url('pathToImage'); }
div#menu2 { background: green; }
div#menu3 { background: blue; }
div.menu { float: left; }
<div class="menu" id="menu1">red</div>
<div class="menu" id="menu2">green</div>
<div class="menu" id="menu3">blue</div>
<br style="clear: both;" />
my page content