background:url is not displayed properly_问答_开发者

background:url is not displayed properly

开发者 https://www.devze.com 2023-03-11 02:20 出处：网络

I\'m stuck. I created an image and want it to be a background image accessed through CSS for the navigation menu with text placed over it in HTML.

相关专题：css

I'm stuck. I created an image and want it to be a background image accessed through CSS for the navigation menu with text placed over it in HTML.

Here is my CSS:

.menu_item {
    background:url(../images/menu_normal.png) no-repeat;
}

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d开发者_JAVA百科td">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Quotation Form</title>
        <link href="css/menu.css" rel="stylesheet" type="text/css">

    </head>
    <body>

            <ul>
                <li class = "menu_item"><a href="#">About</li>
                <li class = "menu_item"><a href="#">Services</a></li>
                <li class = "menu_item"><a href="#">For Translators</a></li>
                <li class = "menu_item"><a href="#">Free Quotation</a></li>
            </ul>

            <img src = "images/menu_normal.png">
    </body>
</html>

Here is the result: http://eximi.dreamhosters.com/turbolingvo/menu.html

I want the image to be displayed behind the menu items just like it is displayed in the <img src...> below it.

What am I doing wrong?

Thank you!

You'll need something like:

.menu_item {
background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;
float: left;
height: 53px;
line-height: 53px;
list-style: none;
text-align: center;
width: 227px;
}

You have to style your li element to adjust look

for example

.menuitem{
background:url(../images/menu_normal.png) no-repeat;
display: block;
height: 33px;
padding: 10px;
width: 207px;
}

this is just example, you can style it however you like as per requirement

Change the background to be on ul element and give the ul element the class menu.

CSS

.menu {background:url(../images/menu_normal.png) no-repeat; }

HTML

<ul class='menu'>
 <li><a href="#">About</li>
 <li><a href="#">Services</a></li>
 <li><a href="#">For Translators</a></li>
 <li><a href="#">Free Quotation</a></li>                  
</ul>