使用css/javascript定位背景图像

Question

我对html/css/javascript真的很陌生，我需要一些帮助来设计一个网站。

我的URL是这样的：http://www.wideconcept.com/test2/test.html

这是一个完整的页面背景网站，背景图像是有响应的。问题是，当用户点击"照片"链接，然后点击"1"时：作为新背景显示在屏幕上的图像没有定位为原始背景图像，页面高度也会增加（用户现在可以向下滚动）。

如何更改html/css代码，以便当用户单击第一个图像时，以与背景图像相同的方式显示它？

谢谢！

编辑-更具体地说：我的主要问题是，当我单击第一个照片链接时，图像的显示位置和尺寸与原始背景图像不同，尽管其css属性与原始背景css属性相同。

Answer 1

我刚刚意识到你的设计有一些背景图像的滚动位置（这在firefox中看起来很好，但在chrome中不好）

解决问题：

img { //line no. 375
    display: block;
    height: 1px;/*this fixes your bug*/
}

我发现的另一个问题是您的div id为background，因此在#background中添加以下规则：

#background {
z-index: 1; /* to fix the layer bug*/
}

Answer 2

我认为你可以用这种方式定义主背景：

body{
 overflow: hidden;
 position: absolute;
 min-height: 100%;
 width: 100%;
 height: auto;
 top: 0;
 left: 0;
 background: url(assets/bg100.jpg) no-repeat center center;
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;
 #Add the browser prefixed CSS:
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 #And
 background-size: cover;
}

然后当用户点击照片按钮时，通过jQuery/javascript更改背景图像url。例如，使用jQuery，这应该类似于以下内容：

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>

希望能有所帮助。

Answer 3

正如Halbano所说，问题在于<div id="background">和<div id="background-image">

你可以通过执行以下操作来修复它：

<div id="background background-image"></div>

在Background分区上执行此操作

突然之间，图像会下降一点，但这只是用css修复的。同时会弹出一个带按钮的菜单。很有吸引力的是手册已经在那里了，但我在Chrome中看不到它。

祝好运