CODEWITHSUNDEEP
htmlcssimagetextoverlay
petroni
petroni

Reputation: 776

Text on top of an image

I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:

<div class="navigation" align="center">
<a href="link1"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link2"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link3"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link4"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link5"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link6"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
</div>

Upvotes: 0

Views: 282

Answers (2)

Vivek Singh
Vivek Singh

Reputation: 275

<div class="navigation" align="center">
<ul><li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a><li>
</ul>
</div> 
<style>
li
{
display:inline-block;
}
</style>

Upvotes: 3

Adam &#39;Sacki&#39; Sackfield
Adam &#39;Sacki&#39; Sackfield

Reputation: 602

Give each a href a class ie .home_bg etc. Then in css add a 

.home_bg {
background-image: url(/example/example.png)
}

do this for each image if they are different. Then in the html remove img tags

Upvotes: 1

Related Questions