CSS- relationship between image position and div elements?

**web88js** · 22 Nov 2006, 03: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 :

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

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

**Wickham** · 23 Nov 2006, 01:41 AM

I tried out your code with one of my images and it placed the background-image central vertically as well as horizontally which put it "below the navbar" as you said because the navbar does not have much in it yet.

To get it central horizontally only, use background-position: 50% 0; or top center and see

http://www.w3schools.com/css/pr_background-position.asp

Thread: CSS- relationship between image position and div elements?

Thread Tools

CSS- relationship between image position and div elements?

Similar Threads

Div alignment blues

Posting Permissions