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>

http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — It worked yesterday., May 24 '15 at 03:12
you can also work this out with some javascript. In that case you ll bind window resize, do not forget to apply _.debounce. Otherwise this can have dramatic effect on performance. CSS is less cross browser but definitely more efficient. — , May 24 '15 at 03:13
@maboiteaspam: Can you please answer your suggestion ? It might help a lot of people like me. `_.debounce.` ? — code-8, May 24 '15 at 13:06
mh. At lot of friendly people like me RTFM, http://underscorejs.org/ — , May 25 '15 at 13:12

NimaNr · Answer 1 · 2015-05-24T03:30:42.500

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'});
});

edited May 24 '15 at 03:30

answered May 24 '15 at 03:16

NimaNr

532
5
20

This is the best way of doing it in my opinion. – Sean Stopnik May 24 '15 at 03:20
@NimaNr : Can you please put back your code again ? I just want to try it. – code-8 May 24 '15 at 03:22
use it only if you are using jQuery – NimaNr May 24 '15 at 03:31
It works, but not yet perfectly. They seem a about 15 px over. How can I minus that `15 px` of that height ? – code-8 May 24 '15 at 03:39
that's because you are using `.height();` try using `.innerHeight();` – NimaNr May 24 '15 at 03:44
They both give me the same result. I tried fix it by doing this `$h = ( $(window).height()-95 ) ;` but I'm not sure if this is a good idea. – code-8 May 24 '15 at 03:54
95 pixels? I think thats your top margin, isn't it? – NimaNr May 24 '15 at 04:00
@NimaNr : now my `carousel dots indicators` is messed up, when I used your code. It used to stay in the bottom of the page, now that I extend the height of the image on page load, but my `carousel dots indicators` doesn't push/stay at the the bottom as before. – code-8 May 24 '15 at 13:22
@NimaNr : here is what I mean : [screenshot](http://s30.postimg.org/s8hmq32gx/Screen_Shot_2015_05_24_at_12_04_59_AM.png) – code-8 May 24 '15 at 13:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78632/discussion-between-nimanr-and-). – NimaNr May 24 '15 at 13:27

score 1 · Answer 2 · answered May 24 '15 at 03:17

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

score 1 · Accepted Answer · answered May 24 '15 at 05:47

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

answered May 24 '15 at 05:47

Bilal Maqsood

1,163
3
15
43

I'm sorry, this doesn't work for me also. Can you please provide some kind of link with your code show that it works ? I've tried a couple time. No luck. Thanks for helping. – code-8 May 24 '15 at 13:25
i saw your code your image is in the `section ` that is ending before `What We Do's section` i would suggest that try to add `What We Do` area in `section.hero` it will work if not then give it static height will work sure :) – Bilal Maqsood May 24 '15 at 14:13

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

CSS

HTML

3 Answers3