background image for menu control in ASP.NET 2.0?

Discussion in 'ASP .Net' started by H, Jul 25, 2006.

  1. H

    H Guest

    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
    H, Jul 25, 2006
    #1
    1. Advertising

  2. 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" <> wrote in message
    news:...
    > 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
    >
    Ken Cox [Microsoft MVP], Jul 26, 2006
    #2
    1. Advertising

  3. H

    H Guest

    it did...

    thanks Ken




    Ken Cox [Microsoft MVP] wrote:
    > 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" <> wrote in message
    > news:...
    > > 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
    > >
    H, Jul 26, 2006
    #3
  4. H

    Joined:
    Jan 27, 2010
    Messages:
    1
    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>>>
    , Jan 27, 2010
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Tkg=?=

    Background image on Menu Control

    =?Utf-8?B?Tkg=?=, May 23, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    509
    =?Utf-8?B?Tkg=?=
    May 23, 2006
  2. Replies:
    1
    Views:
    1,143
  3. jc
    Replies:
    3
    Views:
    1,711
  4. jc
    Replies:
    1
    Views:
    1,351
    Neredbojias
    Mar 19, 2008
  5. IntraRELY
    Replies:
    0
    Views:
    475
    IntraRELY
    Jun 9, 2007
Loading...

Share This Page