带文字/按钮的全屏图像（响应）

Question

我正在为客户制作一个复杂的项目。我设计了一个全屏登陆页面，需要兼容所有大小的窗口/移动设备（响应）。目前我无法将图像定位到整个页面。 div（滑块全宽）需要跨越整个窗口。我提供了一张图片来展示我想要实现的目标。我正在使用Skeleton Framework。 http://www.getskeleton.com/您必须能够在此全屏登录页面后向下滚动才能看到页面内容的其余部分。

我的HTML：

  <div id="slider-full-width">
<div class="container">
  <h2>Seeking a refreshening management service?</h2>
  <h2>You've come to the right place</h2>
  <div id="button-bg">
  <a href="properties.html" class="presentation-button">Properties</a>
  <a href="#body-span-class" class="presentation-button">See why</a>
</div>

   我的CSS：

    #slider-full-width{
width: 100%;
background-image: url('../img/slide-01.jpg');
position:relative;
text-align: center;}
    #slider-full-width h2 {
color: #efefef;

}

提前非常感谢你！

Answer 1

如果您希望背景图片覆盖div，可以在选择器中使用它：

#slider-full-width {
    /* Your code */
    background-size: cover;
}

Answer 2

我不知道为什么它在顶部留下了空白的间隙，但我已经为你创建了一个jsfiddle来展示我做了什么来删除它：http://jsfiddle.net/sKzCc/

<强> HTML：

<div id="slider-full-width"> <div class="container">   <h2>Seeking a
refreshening management service?</h2>   <h2>You've come to the right
place</h2>   <div id="button-bg">   <a href="properties.html"
class="presentation-button">Properties</a>
  <a href="#body-span-class" class="presentation-button">See why</a>   </div>

<强> CSS：

#slider-full-width{ max-width: 100%; min-height:800px; background: url('http://www.wherelionsroam.co.uk/image/two.jpg') no-repeat center
center fixed; -webkit-background-size: cover; -moz-background-size:
cover; -o-background-size: cover; background-size: cover;
position:relative; text-align: center; } #slider-full-width h2 {
color: #efefef; margin-top:-20px; font-size: 25.29pt; padding-top:
285px; text-shadow: 1px 1px 1px #000; }

我在所有主流浏览器的background-size:cover标记中添加了以确保最大的跨浏览器兼容性。 我希望这个解决方案适合你！