Question

有没有办法在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;
}

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

Answer 2

删除＆＃39;已修复＆＃39; - 我认为这就是你要找的东西。

背景图像css覆盖整个浏览器窗口而不使用＆＃34;高度：100％;＆＃34;

2 个答案: