background image css to cover entire browser window without using "height:100%;"

Question

Is there a way to make a background image in css to cover entire browser screen but be larger when it is smaller, the image becomes longer?

It appears if I set the css with height 100%, it is not mobile responsive, but if I set it without the height 100%, the entire browser screen is not covered.

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

Yes, by either set the background image on the body...

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>

or make your section cover the whole body

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

Remove 'fixed' -- I think this is what you are looking for.