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

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 2

    .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%
}

Answer 3

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