可伸缩的背景图像与匹配的水平导航

时间:2013-06-08 21:08:23

标签: html css background center nav

我试图将水平导航栏的位置保持为“同步”,可以说是可扩展的背景图像。现在,当浏览器调整大小时,当图像自由移动时,导航器似乎静态定位。我不知道这是否真的可以诚实。这是网站主页:

www.nickducot.com/parker_new /

这是我到目前为止的代码:

HTML: http://pastebin.com/TjJprLAv

CSS http://pastebin.com/jzYRQPt2

也许媒体查询/响应式设计会有所帮助?谢谢!

1 个答案:

答案 0 :(得分:0)

以下是您可以采用的一种方式的大致轮廓。它涉及将图像放在标记中,而不是作为背景。

HTML

<div class="image-wrapper">
    <img src="imagefile.jpg">
    <div id="menu">
        ... menu
    </div>
</div>

CSS

.image-wrapper {
    width: 85%;
    max-width: 700px;
    /* Note the above numbers are untested and plucked out of thin air for example purposes */
    position: relative;
    margin: 30px auto;
}
.image-wrapper img {
    max-width: 100%;
}
#menu {
    position: absolute;
    top: 100px;
    right: 0;
}

编辑:注意菜单实际上不会改变大小,但锚定到图像的某个点。您还需要使用我用来达到所需效果的所有像素值。