What is the best way to set the height of the div to be the same as the height of the background-image?

Question

Here is my homepage

I have an image on the left side, and a div on the right side.

enter image description here

My goal is to make my right div to have the same height as my image height, but I'm not sure how to accomplish that.

Image Style

.hero {

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

Right div style

.hero-right {
    position: relative;
    z-index: 3;
    text-align: center;
    background-color: #414141;
    height: 100%;
}

HTML

    {{-- Left --}}
    <div class=" hero-left col-xs-12 col-sm-7 col-md-7  col-lg-9">
        <img src="../img/hero-slider/1.jpg" class="hero image-responsive">
    </div>


    {{-- Right --}}
    <div class=" hero-right col-xs-12 col-sm-5 col-md-5 col-lg-3 pull-right" style="background-color: #414141;">

        <div class="hero-slider">
            <div class="slide">

                <div class="col-lg-12 col-md-12 col-sm-12 animated fadeInUp">
                    <h3 style="margin-top:20px;">
                        TUTTI.ED
                    </h3>
                    <h4>EFFECTIVE DIGITAL LEARNING</h4>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

                    <p>Tutti.ed is our educational software platform that empowers leading education companies to bring state-of-the-art digital learning products to market quickly.</p>

                </div>


            </div>
            <div class="slide">
                <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12   animated fadeInUp">
                    <h3 style="margin-top:20px;">
                        TUTTI.DEV
                    </h3>
                    <h4>BY DEVELOPERS, FOR DEVELOPERS</h4>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></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>

                </div>
            </div>
            <div class="slide">

                <div class="col-lg-12 col-md-12 col-sm-12 animated fadeInUp">
                    <h2 style="margin-top:20px;">WHY </h2>
                    <h3> AVENIROS?</h3>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

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

                </div>

            </div>

            <div class="slide">

                <div class="col-lg-12 col-md-12 col-sm-12 animated fadeInUp">
                    <h3 style="margin-top:20px;">
                        TUTTI.ED </h3><h2>with</h2><h3> Learnosity
                    </h3>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

                    <p>Interested in bringing your assessments online or augmenting the digital content you already have?  Click here to see how Tutti.ed with Learnosity can help.
                    </p>
                    {{-- <a class="btn btn-primary" href="#" data-scrollTo="#about">About us</a> --}}
                </div>


            </div>


        </div>


    </div>
</div>

Here is my JSFiddle

I think you're asking the wrong question. I think you actually want to make the tow divs the same height. — Paulie_D, Jun 01 '15 at 15:47
Since your left div's background is in cover, why don't you just set the right div's height to 100% ? — Mehdi Brillaud, Jun 01 '15 at 15:48
Possible duplicate - http://stackoverflow.com/questions/27740172/div-with-background-image-auto-height?rq=1 — Paulie_D, Jun 01 '15 at 15:49
not really, since the layout is responsive, the image will change height based on screen size. You could write some js that finds the left height and sets it as the right height on window.resize event — wowo_999, Jun 01 '15 at 15:50
@wowo_999 : I tried `$('.hero-right').height($('.hero-left').height());` and it works, but it kind of ruin my style. Check it out : [here](http://45.33.69.160/) - that's why I try to avoid using JS for this. :( but if you know what I did wrong please feel free to suggest. [Image](http://s13.postimg.org/eilj36sfb/Screen_Shot_2015_06_01_at_11_52_57_AM.png) — code-8, Jun 01 '15 at 15:51
possible duplicate - [HTML/CSS: Making two floating divs the same height](http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height) — electrophanteau, Jun 01 '15 at 15:53

What is the best way to set the height of the div to be the same as the height of the background-image?

HTML

Here is my JSFiddle

0 Answers0