背景图像 css 覆盖整个浏览器窗口而不使用“height:100%;”答案

【问题标题】：background image css to cover entire browser window without using "height:100%;"背景图像 css 覆盖整个浏览器窗口而不使用“height:100%;”
【发布时间】：2016-06-30 06:33:36
【问题描述】：

有没有办法在css中制作背景图像以覆盖整个浏览器屏幕，但当它更小时更大时，图像会变长？

如果我将css设置为100%的高度，它就不是移动响应的，但是如果我没有设置100%的高度，整个浏览器屏幕就不会被覆盖。

css

.about{
     background: url("city.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

【问题讨论】：

我无法解析您的第一句话。几张截图会非常有帮助。
另外，您可能会发现this article 会有所帮助。

标签： html css

【解决方案1】：

是的，通过在主体上设置背景图像...

body{
  background: url(http://lorempizza.com/500/500) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<section id="about" class = "about">
       <div class="container">
        <div class="row">
            <br><br>
            <h1>My Journey</h1>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                      <div class="panel-body">
                        <p>Having been a dilligent, hard working student in Malahide Community School, I only had one thing I really wanted to study in college - business! When I didn't get the grades for my first choice of business and economics in Trinity, I turned to my second choice - Computer Science and Business. Having gone through a recent name change from Business and Computing, I thought how hard could it really be? </p>
                      </div>
                    </div>
                    

                    <div class="panel panel-default">
                      <div class="panel-body">
                        <p>So, final year came and went.. Some fun, a bit of stress and a fantastic way to end a great four years. What made the experience even better, was achieving a fantastic final grade, which made the time spent worth it!   </p>
                      </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <br><br><br><br><br><br>
                    <div class="panel panel-default">
                      <div class="panel-body">
                        <p>When I got to college, I had a tough time getting my head around most of the programming modules that were part of the course. It was like nothing I'd ever seen before. A far cry from the spread sheets I thought I'd be filling in. Having reached the end of the year, exam time arrived and I ended up failing two programming modules - bye bye summer! But I got through the repeats, and funnily enough, ended up learning a lot about myself, and more importantly: programming! </p>
                      </div>
                    </div>
                </div>
        </div>
      </div>
    </section>

或者让你的section覆盖全身

html, body {
  margin: 0;
}

.about{
  min-width: 100vw;
  min-height: 100vh;
  background: url(http://lorempizza.com/500/500) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<section id="about" class = "about">
       <div class="container">
        <div class="row">
            <br><br>
            <h1>My Journey</h1>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                      <div class="panel-body">
                        <p>Having been a dilligent, hard working student in Malahide Community School, I only had one thing I really wanted to study in college - business! When I didn't get the grades for my first choice of business and economics in Trinity, I turned to my second choice - Computer Science and Business. Having gone through a recent name change from Business and Computing, I thought how hard could it really be? </p>
                      </div>
                    </div>
                    

                    <div class="panel panel-default">
                      <div class="panel-body">
                        <p>So, final year came and went.. Some fun, a bit of stress and a fantastic way to end a great four years. What made the experience even better, was achieving a fantastic final grade, which made the time spent worth it!   </p>
                      </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <br><br><br><br><br><br>
                    <div class="panel panel-default">
                      <div class="panel-body">
                        <p>When I got to college, I had a tough time getting my head around most of the programming modules that were part of the course. It was like nothing I'd ever seen before. A far cry from the spread sheets I thought I'd be filling in. Having reached the end of the year, exam time arrived and I ended up failing two programming modules - bye bye summer! But I got through the repeats, and funnily enough, ended up learning a lot about myself, and more importantly: programming! </p>
                      </div>
                    </div>
                </div>
        </div>
      </div>
    </section>

【讨论】：

【解决方案2】：

删除“固定”——我想这就是你要找的。p>

【讨论】：

但我还是希望它是浏览器窗口的高度？那可能吗？ IE。我仍然想要行高：100%；但是，也希望它具有移动响应能力。
我们需要完整的上下文来帮助诊断正在发生的事情。我建议设置一个 JSFiddle
这是我对 JFiddle 的尝试：[link] (jsfiddle.net/higginni/at5ka5ua/1) @Spencer .... 我正在寻找的是一个背景图像，它是我的浏览器窗口的整个高度，但当窗口大小调整为移动设备大小时，基本上是 150%（例如）。