How do I make my heading image show at it's full height without adding padding to elements inside of it?

Question

Example I made: JSFiddle

I want the background image on my header to always be 100% of the photo's height. I am just unsure how to do this without adding a ton of padding to the H2 on top of the image. I guess another question I would have is how do I make the background image fullscreen no matter what device it is on?

Here is what I am trying. Any help would be appreciated.

.heading {
    background: url("http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg");
height: 100%;
/* background-size: cover; */
}

.heading h2 {
    padding: 50px;
    text-align: center;
    color: white;
}

Answer 1

For making heading background image try below code

.heading {
  background: url("http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg");
  background-size: container; /* background size will be equal to your content */
  background-position: 50%;
  background-repeat: no-repeat;
}

.heading h2 {
  padding: 50px;
  text-align: center;
  color: white;
  margin: 0; /* reset the default margin for header tags */
}

For background image full screen no matter what device it is on try below code

* {    /* reset all the default margins and padding */
  padding: 0;
  margin: 0;
}

.background-bg {
  width: 100%
  height: 100vh; /* height will be equal to viewport.*/
  background-image: url("background-image.jpg");
  background-size: cover;
  background-position: 50%;
}