background image for menu control in ASP.NET 2.0?

H

H

is it possible to add a background image to the menu items?

I can add an image, but it displays on top of the text of the menu
items.

How can I add the image and still have the text in the foreground?

Thanks...
H
 
K

Ken Cox [Microsoft MVP]

Hi H,

You need to do add the image through a CSS style. Look for the
background-image attribute. Here's a quick example.

Let us know if this helps?

Ken
Microsoft MVP [ASP.NET]


<%@ Page Language= "VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.menuItem
{
color:black;
border:Solid 1px Gray;
background-color:#c9c9c9;
background-image : url(http://www.gc.ca/images/lfblt.gif);
padding:2px 5px;
}
</style>
<title>Menu Templates</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="menuItem"
DynamicMenuItemStyle-CssClass="menuItem"
Runat="server">

<Items>
<asp:MenuItem Text="Produce">
<asp:MenuItem Text="Apples" />
<asp:MenuItem Text="Oranges" />
</asp:MenuItem>
<asp:MenuItem Text="Beverages">
<asp:MenuItem Text="Soda">
<asp:MenuItem Text="Coke" />
<asp:MenuItem Text="Pepsi" />
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>

</div>
</form>
</body>
</html>
 
H

H

it did...

thanks Ken



Hi H,

You need to do add the image through a CSS style. Look for the
background-image attribute. Here's a quick example.

Let us know if this helps?

Ken
Microsoft MVP [ASP.NET]


<%@ Page Language= "VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.menuItem
{
color:black;
border:Solid 1px Gray;
background-color:#c9c9c9;
background-image : url(http://www.gc.ca/images/lfblt.gif);
padding:2px 5px;
}
</style>
<title>Menu Templates</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="menuItem"
DynamicMenuItemStyle-CssClass="menuItem"
Runat="server">

<Items>
<asp:MenuItem Text="Produce">
<asp:MenuItem Text="Apples" />
<asp:MenuItem Text="Oranges" />
</asp:MenuItem>
<asp:MenuItem Text="Beverages">
<asp:MenuItem Text="Soda">
<asp:MenuItem Text="Coke" />
<asp:MenuItem Text="Pepsi" />
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>

</div>
</form>
</body>
</html>

H said:
is it possible to add a background image to the menu items?

I can add an image, but it displays on top of the text of the menu
items.

How can I add the image and still have the text in the foreground?

Thanks...
H
 
Joined
Jan 27, 2010
Messages
1
Reaction score
0
I have a website in main directory say "website1" which have some pages directly into it like: "website1\default1.aspx" & "website1\default2.aspx", and some in further sub-directories like: "website1\logs\default3.aspx" and "website1\logs\default4.aspx". and have a Image directory like this: "website1\lImages\1.gif".

so the directory structure is like:
"website1"
"website1\default1.aspx"
"website1\default2.aspx"
"website1\logs\default3.aspx"
"website1\logs\default4.aspx"
"website1\lImages\1.gif"


Now the problem with above solution is when I give the image path in css file like this:

.mainhover
{
background-image: url('~/Images/1.gif');
}


this image appears in the background of menu of pages "default1.aspx" and "default2.aspx" but does not appears in "default3.aspx" and "default4.aspx" :oops:

i've tried it as:
background-image: url('~/Images/1.gif');
background-image: url('/Images/1.gif');
background-image: url('Images/1.gif');
background-image: "~/Images/1.gif'";
background-image: "/Images/1.gif'";
background-image: "Images/1.gif'";

but nothing is working for pages "default3.aspx" and "default4.aspx"


my menu code is as follows:
<asp:Menu ID="Menu1" runat="server" Width="100%" DataSourceID="SiteMapDataSource1" >
<StaticHoverStyle ForeColor="White" CssClass="mainhover" />
</asp:Menu>

kindly suggest a solution...
thanx in advance>>>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top