PDA

View Full Version : 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 :

<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

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