web88js
22 Nov 2006, 04:49 PM
Hello everyone:
I am designing a web page which has image logo on top followed by CSS Navbar beneth it.
The default postion for image is top left corner on browser. I tried to use background-position property
to center the image. but it won't work. The image will move below the navbar.
I think I am not understanding the relationshiop betwo div elements and image. Please look at my code and give me some suggestions. thanks!
HTML code :
<body>
<div id="navbar2">
<ul>
<li><a href="">Button1</a></li>
<li><a href="">Button2</a></li>
<li><a href="">Button3</a></li>
</ul>
</div>
</body>
external stylesheet code
body {background-image: url(images/mutual_banner.gif);
background-repeat: no-repeat;
background-position: center;}
#navbar2 {height: 30px;
width: 80%;
border-top: 1px solid #000;
border-top: 1px solid #000;
background-color: #336699;
margin: 100px 50px;}
Jeff
11-22-06
I am designing a web page which has image logo on top followed by CSS Navbar beneth it.
The default postion for image is top left corner on browser. I tried to use background-position property
to center the image. but it won't work. The image will move below the navbar.
I think I am not understanding the relationshiop betwo div elements and image. Please look at my code and give me some suggestions. thanks!
HTML code :
<body>
<div id="navbar2">
<ul>
<li><a href="">Button1</a></li>
<li><a href="">Button2</a></li>
<li><a href="">Button3</a></li>
</ul>
</div>
</body>
external stylesheet code
body {background-image: url(images/mutual_banner.gif);
background-repeat: no-repeat;
background-position: center;}
#navbar2 {height: 30px;
width: 80%;
border-top: 1px solid #000;
border-top: 1px solid #000;
background-color: #336699;
margin: 100px 50px;}
Jeff
11-22-06