Here is my homepage
I want to increase the height of my image to fit the entire screen. I know that I need to adjust the height attribute, I did this and nothing works.
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; . He does not 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> </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> </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"> </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> <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> </div> </div> </section>
source share