How can I extend image height to fit my whole screen?

Question

Here is my homepage

I want to extend the height of my image to fit the whole screen. I know that I have to adjust the height attribute, I did that, and nothing seems to work.

CSS

.hero {
  background: #fff;
  border-bottom: 8px solid #7ac9ed;
  background: url('../img/hero-slider/boxfill2sm.jpg');
  background-size: cover;
  position: relative;
  padding-top: 0;
  height: auto;
}

Note: I tried height: auto;. It doesn't do anything.

HTML

<section class="hero">
    <div class="container-fluid no-margin no-padding">

        <div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
            <div>

                <div class="row">
                    <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
                        <div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;">

                            <div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp fadeInDown">
                                <h2 style="margin-top:50px;" class="text-left">MEET TUTTI.ED</h2>
                                <p>EFFECTIVE DIGITAL LEARNING</p>
                                <p>Tutti.ed is our educational software platform that empowers education companies to bring state-of-the-art digital learning products to market quickly.</p>
                                <a class="btn btn-primary" href="/tutti-ed">Learn More</a>
                            </div>
                            <div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
                                <!--                                <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
                                <!--                            <img class="iphone" src="img/hero-slider/iphone.png" width="649" height="400" alt="Coming Soon Page"/> -->
                            </div>

                        </div>
                        <div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">

                            <div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
                                <h2 style="margin-top:50px;" class="text-left">MEET TUTTI.DEV</h2>
                                <p>BY DEVELOPERS, FOR DEVELOPERS</p>
                                <p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently.  Get it together with Tutti!</p>
                                <a class="btn btn-primary" href="/tutti-dev">Learn more</a>
                            </div>
                            <div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
                                <!--                                <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
                            </div>

                        </div>
                        <div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">

                            <div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
                                <h2 style="margin-top:70px;" class="text-left">WHY AVENIROS?</h2>
                                <p>Our team has been building content delivery platforms for over 20 years.  We have experience with development from large scale LMS installations to mobile applications.  We can offer full turn-key technical services for your content or help your technical team get to market on time.
                                </p>
                                <a class="btn btn-primary" href="#" data-scrollto="#about">About us</a>
                            </div>
                            <div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
                                <div class="video">
                                    <!--                                    <img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/> -->
    <!--
                                    <img src="img/hero-slider/macbook.png" width="782" height="422" alt=""/>
                                    <div class="vide-holder">
                                        <iframe src="//player.vimeo.com/video/79036490?byline=0&amp;portrait=0&amp;color=ffeeac" width="720" height="405"></iframe>
                                    </div>
                                -->
                            </div>
                        </div>

                    </div>
                </div></div><div class="bx-controls bx-has-pager"><div class="bx-pager bx-default-pager"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div><div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div></div></div></div>
            </div>


        </div>
    </div>



    <!--Hero Slider-->
    <div class="  col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" id="hero-right" style="height: 496px;">

        <div>
            <div>

                <div class="animated fadeInLeft">
                    <h1>Learnosity</h1>
                    <p>Did you know we are partnered with learnosity?</p>
                    <p>To learn more click the button below..filler. </p>
                    <a class="btn btn-primary" href="#">Learnosity</a>
                </div>
            </div>

        </div>

        <!--Close Hero Slider-->
    </div>
</div>
</section>

Answer 1

This should work

   .hero {
  background: #fff;
  border-bottom: 8px solid #7ac9ed;
  background: url(j.jpg) no-repeat center center fixed; 
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
  padding-top: 0;
  height: 100%;
  width: 100%
}

Answer 2

You need to determine screen height for that so its better to use JavaScript which can be accessed with screen.height. Also if you are using jQuery, you can get this property with $( window ).height();

$(document).ready(function() {
    h=$(window).height();
    $('.hero').css({'height':h+'px'});
});

Answer 3

    .hero {
  background: #fff;
  border-bottom: 8px solid #7ac9ed;
  background: url(j.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  padding-top: 0;
  height: 100%;
  width: 100%
}