改变浏览器的分辨率时设计问题

Question

我正在使用此网站http://zap3d.com，这是顶级菜单栏的问题 当我改变浏览器窗口菜单的大小背景被切断时。

请帮忙。

我用这个css作为顶级菜单： -

 .nav_bar {
    float: right;
    width: 100%;
    background: url(/content/img/top-menu-bg.gif);
    height: 30px;
    background-size: contain;
    }
.cen_div {
width: 1000px;
margin: 0 auto;
}
.nav_bar .nav {
list-style: none outside none;
float: right;
margin: 0;
padding: 0 0 0 20px;
position: relative;
}
.nav_bar .nav li {
float: left;
margin: 3px 7px;
}

和html： -

<div class="nav_bar">
    <div class="cen_div">
        <ul class="nav">
            <li><a href="/Home/Index">Home</a></li>
            <li><a href="/Account/Registration/">Sign Up</a></li>   
        </ul>
    </div>
</div>

Answer 1

您需要在min-width: 1040px;和body设置nav_bar，以便在较小的窗口上设置。

Answer 2

你只需要重复背景：

.nav_bar {
    ....
    background: url(/content/img/top-menu-bg.gif) repeat-x ;
    ...
}