CODEWITHSUNDEEP
htmlcsshtml-lists
Nick
Nick

Reputation: 147

I need the background image of separate <li> to be different

I have this code (shown below) which is a very simple webpage (just getting into html) and as you can see, there is a div called "navbar" which contains a 'ul'. I want each of the 'li' in this list to have a different background image (the reason being I have created the button images in photoshop, and want to use those rather than plain text). I begun by giving each 'li' an id, and trying to manipulate those id's in css, but that hasn't worked. Can anybody help me? If I haven't given enough info, I can, of course, provide more.

Many thanks!

<head>
    <link rel="stylesheet" type="text/css" href="main.css" />

    <title>Resonance Recording & Rehearsals</title>
</head>

<body>
    <div id="wrapper">

        <div id="header">
        </div>


        <div id="navbar">
            <ul>
                <li id="gallerybutton"> <a href="gallery.html"> Gallery </a> </li> 
                <li id="homebutton"> <a href="index.html"> Home </a> </li> 
                <li is="about_usbutton"> <a href="about_us.html"> About Us </a> </li> 
            </ul>
        </div>

        <div id="cgiform">
        </div>

        <div id="footer">
        </div>

    </div>
</body>

CSS:

body{
background-image:url("mainbg.png");
background-repeat:no-repeat;
background-color:#000000;
background-size: 100%;

height: 100%; 
width: 100%;

}

#header{

background-image:url("mainheader.png"); 
height: 146px;
width: 1000px;
margin: 0px auto;
background-size: 100%;
}

#navbar{

background-image:url("mainnavbar.png");
height: 88px;
width: 1000px;
margin: 0px auto;
background-size: 100%;

}

ul{
list-style-type: none;
list-style-position: initial;
list-style-image: initial;
padding: 28px 0px 0px 40px; /* padding syntax = top right bottom left */
}

li{
color: #fff;
display:inline; 

}

a:link {
text-decoration:none;
color: #fff;
}

a:visited {
text-decoration:none;
color: #fff;
}

a:hover {
text-decoration:underline;
color: #fff;
}

a:active {
text-decoration:underline;
color: #fff;
}

#navbar #gallerybutton{
background-image:url("gallery.png") no-repeat top center;
}

Upvotes: 1

Views: 1751

Answers (3)

SpaceBeers
SpaceBeers

Reputation: 13947

A couple of things really. You don't need to nest the li ID's in #navbar. The fact that they are ID's means they are unique elements so you're just confusing things by doing that. It doesn't matter that it's in #navbar as there is only ever going to be one instance of #gallerybutton.

For each ID you need the following CSS:

#ID {
    background: url("gallery.png") no-repeat top center;
}

If you're going to use the one line background in CSS then it's just background, background-image won't work. If you want to use that then you need to also use background-position and background-repeat.

Also I'd not use ID's for the rest of your elements but that's a different debate really.

Upvotes: 2

STEEL
STEEL

Reputation: 10017

You need to do this for rest of the IDs too, (set hight n width properly)

#gallerybutton {
background:url("image.jpg") no-repeat top left; display: block; height: 50px; width: 200px;
}

Upvotes: 1

prageeth
prageeth

Reputation: 7395

Change "background-image" CSS property to "background" as below.

#navbar #gallerybutton{
  background:url("gallery.png") no-repeat top center;
}

Upvotes: 2

Related Questions