Bootstrap background-cover在“容器 - 流体”中设置图像，因此高度填充页面

Question

阿罗哈，

这是我的笔 - http://codepen.io/DarrenHaynes/full/gLoYpp/

那支钢笔的代码：

HTML：

<div class="container-fluid spiritual-background">
    <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-1"></div>
    <div class="col-md-4">
    </div>
      <div class="col-md-1"></div>
  </div>

  <div class="row">
    <div class="col-md-7"></div>
    <div class="col-md-4">
      <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
      <h3>- Billy Ocean</h3>
    </div>
      <div class="col-md-1"></div>
  </div>
   <div class="toolbar">
      <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
      <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
      <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
      <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
    </div>
</div>

CSS：

.spiritual-background {
  background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.toolbar {
  margin-bottom: 4%;
  margin-left: 56%;
}

.row {
  margin-top: 8%;
  margin-bottom: 7%;
}
h2 {
  text-align: center;
}

h3 {
  text-align: right;
}

我试图找出如何让背景图像的高度完全显示，同时它仍然覆盖页面。当它站立时，图像中的岩石被截断在图像的底部，但我想看到图像的整个高度。

我想避免将图像放入“html”或“body”标签中 - 我将使用jquery删除并添加“container-fluid”标签中的类，以便在按下4个按钮之一时更改背景图像在工具栏中。换句话说，“。spiritual-background”将被移除并放置在我尚未创建的另一个类中。

Answer 1

要使区域全屏，只需将其放在页面的根部，使其0绝对定位所有位置坐标，并给它一个负z-index，这样它就不会坐在任何其他元素之上。

Re：背景图片以及它如何全屏适应页面，你有两个选择。

background-size: cover（你现在拥有的）和浏览器将使图像全屏，但会切断部分背景以适应浏览器的宽高比。

.spiritual-background {
  background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
  background-size: cover;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
}

.toolbar {
  margin-bottom: 4%;
  margin-left: 56%;
}

.row {
  margin-top: 8%;
  margin-bottom: 7%;
}
h2 {
  text-align: center;
}

h3 {
  text-align: right;
}

<div class="container-fluid spiritual-background">
    <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-1"></div>
    <div class="col-md-4">
    </div>
      <div class="col-md-1"></div>
  </div>

  <div class="row">
    <div class="col-md-7"></div>
    <div class="col-md-4">
      <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
      <h3>- Billy Ocean</h3>
    </div>
      <div class="col-md-1"></div>
  </div>
   <div class="toolbar">
      <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
      <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
      <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
      <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
    </div>
</div>
CSS:

background-size: 100% 100%;将显示整个图像，并将拉伸图像的高度和宽度，以匹配其应用的元素的大小。除非浏览器/元素与图像的宽高比完全相同，否则这将在99％的情况下使图像偏斜。

    .spiritual-background {
      background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
      background-size: 100% 100%;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1;
    }

    .toolbar {
      margin-bottom: 4%;
      margin-left: 56%;
    }

    .row {
      margin-top: 8%;
      margin-bottom: 7%;
    }
    h2 {
      text-align: center;
    }

    h3 {
      text-align: right;
    }

    <div class="container-fluid spiritual-background">
        <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-1"></div>
        <div class="col-md-4">
        </div>
          <div class="col-md-1"></div>
      </div>

      <div class="row">
        <div class="col-md-7"></div>
        <div class="col-md-4">
          <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
          <h3>- Billy Ocean</h3>
        </div>
          <div class="col-md-1"></div>
      </div>
       <div class="toolbar">
          <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
          <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
          <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
          <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
        </div>
    </div>

Answer 2

您好

它们不是您的全部代码。

问题还在于其他问题。

1-从班级＆＃34; .spiritual-background＆＃34;。

中删除背景网址

2-将这些属性添加到课程＆＃34; .fullpage＆＃34;：

background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
background-repeat: no-repeat;
background-size: cover;

3-如果你删除＆＃34; iframe＆＃34;在div中使用id =＆＃34; result-iframe-wrap＆＃34;您将能够看到背景图像。通过使用背景位置，您可以将图像向右和向左/向上和向下移动，以显示您瞄准的图像的每个部分。

背景位置：40％30％;

iframe它自己有另一个html标签，并且主体位于主页主体的顶部，这不是正确的方法。

4 - 如果您使用fullpage类向主体添加以下代码，您可以找到文本和按钮，但您需要从头开始执行样式：

<div class="container-fluid spiritual-background">
    <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-1"></div>
    <div class="col-md-4">
    </div>
      <div class="col-md-1"></div>
  </div>

  <div class="row">
    <div class="col-md-7"></div>
    <div class="col-md-4">
      <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
      <h3>- Billy Ocean</h3>
    </div>
      <div class="col-md-1"></div>
  </div>
   <div class="toolbar">
      <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
      <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
      <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
      <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
    </div>
</div>

*如果您发送所有其他代码，我将能够帮助您更好地解决所有问题。

Answer 3

感谢大家的答案。通过更多的研究，我在codepen上找到了一些能够得到我需要的确切结果的东西 - https://codepen.io/theiwaz/pen/vybjc

这是该笔的CSS：

html, body{
  height: 100%;
}
body { 
            background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
            background-position: center center;
            background-repeat:  no-repeat;
            background-attachment: fixed;
            background-size:  cover;
            background-color: #999;

}

将html的父元素设置为100％高度，并将body标签设置为静态屏幕高度。我通过在background-position height参数中添加一个百分比位置来稍微修改它，以使图像符合我的偏好。