javascript - div的拉伸(stretch)背景

Question

我需要在 div 元素内拉伸(stretch)图像。

所以在网站上:http://fishcacher.sytes.net/有背景图片

对于“fc-container”div 元素:

.fc-container {
    background-image:url('../images/bg_1400.png'); 
    background-repeat:no-repeat;  
    margin:0px; 
    background-size: cover;
}

我需要它完全像这样工作 http://www.htmlite.com/faqEX004.html ，但在我的“fc-container”div 元素中。目前很多图片隐藏在底栏下方。

我尝试了不同的方法，但无法解决这个问题。

感谢任何帮助。非常感谢!

Answer 1

在您的示例网站上，他们没有单独使用 CSS 来创建他们的背景，他们使用了一个包含图像的包装器，然后将其拉伸(stretch)以填满整个屏幕。这是所需的 HTML 代码:

<div class="backgroundimagewrapper">
    <img class="backgroundimage" src="http://fishcacher.sytes.net/images/bg_1200.png" />
</div>

这是 CSS

.backgroundimagewrapper{
    position: absolute; /* So we can position our div precisely */
    left: 0; /* Move it to the top-left */
    top: 0;
    z-index: -100; /* Make it appear behind other elements */
    padding: 0; /* Make sure we don't have any white space around the edges */
    margin: 0;
    width: 100%; /* Make it fill our whole screen */
    height: 100%;
}
.backgroundimage{
    width: 100%; /* Make the image fill the whole div */
    height: 100%;
 }

他们在您链接的网站上就是这样做的。无论如何，这是一个带有代码的 JSFiddle:http://jsfiddle.net/T2t5m/5/