Jquery 引导程序背景封面设置图像在“内”；容器液体“；所以高度填满了整个页面

阿罗哈

这是我的钢笔--

那支笔的代码是：

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:

我试图找出如何在背景图像仍然覆盖页面的情况下，充分显示背景图像的高度。当它站立时，图像中的岩石在图像底部被切断，但我想看到图像的整个高度

---

我希望避免将图像放入“html”或“body”标记中——我将使用jquery在“container fluid”标记中删除和添加类，以便在按下工具栏中的4个按钮之一时更改背景图像。换言之，“.Spirative background”将被删除，并与我尚未创建的另一个类一起放置。

要使该区域全屏显示，只需将其放在页面的根部，对所有位置坐标使用

0

绝对定位，并为其设置负z索引，使其不位于任何其他元素之上

Re：背景图像和它如何适应全屏页面，您有2个选项

background size:cover

（您现在拥有的）和浏览器将使图像全屏显示，但会切断部分背景以适应浏览器的纵横比

。精神背景{
背景：url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
背景尺寸：封面；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
z指数：-1；
}
.工具栏{
利润底部：4%；
左缘：56%；
}
.行{
利润率最高：8%；
利润底部：7%；
}
氢{
文本对齐：居中；
}
h3{
文本对齐：右对齐；
}

当事情变得艰难时-艰难的人开始行动
不知道他们会走多远。
如果我再加一行怎么办。
-比利海洋
精神名言
技术报价
生活语录
励志语录
CSS:

嗨

它们不全是你的代码

其他问题也存在

1-从类“”中删除背景url

2-将这些属性添加到类“.fullpage”：

3-如果您使用id=“result iframe wrap”移除div中的“iframe”，您将能够看到背景图像。通过使用背景位置，您可以将图像移动到右侧和左侧/顶部和底部，以显示目标图像的每个部分

背景位置：40%30%

Iframe-it-self有另一个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>

当事情变得艰难时-艰难的人开始行动
不知道他们会走多远。
如果我再加一行怎么办。
-比利海洋
精神名言
技术报价
生活语录
励志语录

---

*如果您发送所有其他代码，我将能够在修复所有代码方面为您提供更多帮助。

谢谢大家的回答。通过进一步的研究，我在codepen上发现了一些东西，它给出了我需要的确切结果-

以下是该笔的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标记也设置为保持静态屏幕高度。我通过在

背景位置

高度参数中添加一个百分比位置，稍微修改了这一点，以使图像符合我的偏好。

您有两个选项。1） 使用

background size:cover

，浏览器将使图像全屏显示，但会切断部分背景以适应浏览器的纵横比。或者2）拉伸图像，使其具有100%宽度和100%高度，并匹配浏览器视口的纵横比，但这将使图像倾斜，除非浏览器纵横比与图像纵横比完全匹配。你更喜欢哪一种？让我们来做图像拉伸。如果伸展运动需要很长时间，我也可以在以后修剪。嗨，奈金。谢谢你的帮助。这就是所有的代码，我用codepen创建了它，其中没有显示“HTML”和“body”标记，但它们都存在。如果您转到codepen链接，您将看到HTML和CSS。

<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>

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;

}