Здорово, что вы задаете правильные вопросы, и вы правы, задавая их.В любом случае используйте изображение в качестве фона, но никогда не помещайте текст в качестве изображения, чтобы избежать его, особенно в меню.Причиной этого является то, что поисковые системы в два раза не читают контент, а вторые программы чтения с экрана доступности не могут его прочитать, а пользователи не могут увеличивать текст через браузеры.
Ваша разметка может выглядеть примерно так
.nav{
background-image:url("bg.jpg");
background-repeat:no-repeat;
width:yourwidth;
height:yourheight;
display:block;
}
.nav li{
list-style:none;
float:left;
margin-left:20px;
margin-right:20px;}
разметка
<ul class="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>