Adaptive div height

Question

I have a wordpress site with a container at the top to display a background image. I want the background to remain proportional to the height of the div to adjust according to the size of the screen. I am currently using a height tag to show this area (see below). Basically, I want it to not overflow when the site is large (it hides the bottom of the image at higher resolutions) and does not show white below when the site is small.

How can I react to height?

You can see the site here: http://69.195.124.65/~flywitha/

CSS

.top_site{
    background: rgba(0, 0, 0, 0) url("/wp-content/themes/alex/images/mast_w-kid_1920x800.jpg") no-repeat scroll right bottom;
    background-size: contain;
 }

.top_site h1{
    font-family:lato, sans-serif;
    color:rgba(40, 40, 40, 0.8);
    padding: 15% 0 9.255% 15%;
    margin:0;
    width:50%;
    font-size:6rem;
    font-weight:bold;
    -webkit-text-stroke: 1px black;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

HTML:

<div class="top_site">
    <h1 class="site-hdr-tag inset-text">
            the<br>
            INTERACTIVE<br>
            AEROSPACE<br>
            LEARNING<br>
            CAMPUS
    </h1>
</div>

Answer 1

You may be looking for

background-size: cover

or

background-size: contain