<html>
<title>Asia Ghee Mills</title>

<style type="text/css">

#menu	{float: left;
	width:15%;height:400px;
	background-color:pink;
	padding:5px 5px 5px 5px;
	font-size:15pt;color:green;font-family:arial;
	margin-top:10px;margin-left:0px;
	line-height:28px}


#menu img {width:100%;height:200px;}


a:link 	{color: blue; text-decoration: none;text-decoration:underline; }
a:visited 	{color: red; text-decoration: none; }
a:hover 	{color:blue; background:url("skyblue.bmp");text-decoration:underline;font-weight:bold} 

</style>


<DIV id="menu"><img src="images4.jpg" alt=" ">
<A HREF="http://wwww.a.com">Home</a><br>
<A HREF="http://wwww.a.com">Products</a><br>
<A HREF="http://wwww.a.com">Health Tips</a><br>
<A HREF="http://wwww.a.com">Others</a><br>
<A HREF="http://wwww.a.com">Contact Us</a>
 </DIV>
</body>
</html>

The problem details is shown in attached image

Recommended Answers

<div id="menu" style='background-image: url(images4.jpg);'>

You're trying to place the links on top of an image that is not a background. Either make it a background or use positioning and layers to put the links on top of the image.

Jump to Post
.bg {height:100%; width:100%; z-index:-1; position:absolute; top: 0;left 0;}
Jump to Post

All 6 Replies

<div id="menu" style='background-image: url(images4.jpg);'>

You're trying to place the links on top of an image that is not a background. Either make it a background or use positioning and layers to put the links on top of the image.

Sir, problem is solved but background image is repeated twice in the div. I want it to be strected in div. (not repeat)
You can see it in attachment please.

Since (I assume) your image is 200px tall:

<div id="menu" style='background-image: url(images4.jpg); height 200px'>

OR - since it's a gradient fading to white

<div id="menu" style='background: #fff url(images4.jpg); background-repeat: repeat-x'>

Otherwise - look at some CSS gradient generators for the code (http://www.designdetector.com/demos/css-gradients-demo-1.php is one.)

Sir, Finally I have following codes

<html> 
<title>Menu on div with background image</title> 
 
 
<style type="text/css"> 
 
 
#menu   {float: left;
        width:15%; height: 350px;
        font-size:15pt;color:green;
        font-family:arial;
        margin-top:10px;margin-left:20px;
        line-height:28px}

.bg	{height:100%;width:100%}   
   

a:link          {color: blue; text-decoration: none;text-decoration:underline;}
a:visited       {color: red; text-decoration: none; }
a:hover         {color:blue; background-color:white;text-decoration:underline;font-

weight:bold} 
 
 
</style>
</head>
<body>

<div id="menu"> <img class="bg" src="Flowers.JPG" height=100% width=100%>
<a HREF="http://wwww.a.com">Home</a><br>
<a HREF="http://wwww.a.com">Products</a><br>
<a HREF="http://wwww.a.com">Contact Us</a>
</div>
</body>
</html>

Now I want result shown in attached file

.bg {height:100%; width:100%; z-index:-1; position:absolute; top: 0;left 0;}

Thanks sir,
Problem solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.