Question

我制作了一个简单的网站，其顶部栏将放置在导航栏旁边，导航栏放置在图像上，图案上的木图案标志在整个网站上水平延伸。我似乎无法找到正确的方法来确保木图片占据每台计算机的整个顶部，图像的宽度为3888像素，因此它不像整个宽度将在大多数显示器上用完，我只是寻找帮助，让它在页面顶部看起来正确，整个顶部条的高度为200像素，然而我可以在每台显示器上都有一个漂亮的顶部条。

<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>

Answer 1

使用<img src="navibar.png" width="3888px" height="275px"/>作为背景..

background:url('path/to/navibar.png');

如何使图像位于我的网站顶部，但确保它显示为每个人的相同？

1 个答案: