Я делаю простой веб-сайт, на котором будет верхняя панель, на которой будет размещен логотип рядом с панелью навигации и панель навигации, расположенная на изображении с логотипом дерева, который простирается горизонтально по всему сайту. Кажется, я не могу найти правильный способ убедиться, что изображение на дереве занимает весь верх для каждого компьютера, изображение имеет ширину 3888 пикселей, поэтому его не так, как вся ширина будет использоваться на большинстве мониторов, Im just ища помощь по тому, чтобы это выглядело прямо в верхней части страницы, при этом весь верхний бар был высотой 200 px, и, тем не менее, у меня есть хороший внешний вид, который полностью находится на каждом мониторе.Как сделать изображение в верхней части моего веб-сайта, но убедитесь, что оно отображается одинаково для всех?
<html>
<head>
<style>
body{
background-color:#F0E0B2;
}
img{
position:absolute;
z-index:-2;
left:0px;
right:0px;
top:0px;
}
img2{
left:0px;
top:0px;
}
ul{
z-index:1
list-style-type:none;
margin-top:240px;
margin-left:500px;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a:link,a:visited{
width:120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
text-color:#B8B8B8 ;
}
</style>
<body>
<img src="navibar.png" width="3888px" height="275px"/>
<img src="whitebird.png" width="250px" height="200px"/>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>