HTML ,CSS Navigation Menu using images - html

Question

I have an image 78x26 px that i want to use as buttons for my navigation bar.
What would be the most suitable way of doing this?
I want the image to keep its original size at the moment it doesnt
#navbar li {
background-image:url("../images/btns.png");
}
Im aware that i can do something like this but then again how do i place the text over the images
<li><img src="images/btns.png"></li>

Answer 1

You must also specify your width and height of the <li>. Please try this:
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:26px;
}
<li> elements, I believe, are inline and therefore you must do something like this to make them appear side by side:
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:26px;
float: left;
}

Answer 2

background-image alone does not scale the image. If you feel like it's not rendering at the original size, it's probably because it's repeating.
use this instead:
background:url("../images/btns.png") no-repeat;
And then
<li>Your text here</li>
You might now need to resize the li to fit your design
It could be better if you load your code online, like on codepen.io

Answer 3

I believe this to be the standards ways:
<nav class="navbar" role="navigation">
<ul class="main-nav">
<li class="menu-1">Menu-Link-text</li>
<li class="menu-2">Menu-Link-text</li>
....
</li>
</ul>
</nav>
.navbar {
overflow:hidden /* trick to force the navbar to wrap the floated <li>s */
}
.main-nav li {
float: left;
display: inline; /* bug fix for older IE */
}
.main-nav a {
display:block; /* bigger click area */
width: 78px;
height:26px;
text-indent: 100%; /* Text in the link for search engines and assistive technologies */
whitespace: nowrap; /* see above */
background: #yourFallBackBackgroundColor url("../images/btns.png") no-repeat 0 0; /* use a sprite with all images in one file and move them within background as required */
}
.menu-1 {
background-position:0 0;
}
.menu-2 {
background-position:-78px 0;
}
.menu-3 {
background-position:-156px 0;
}