auto scaling background in jumbotron

Hello everyone,

I am just learning CSS/BS, so this may be a novice question.

Going through the BSS tutorial and experimenting on my own site. I am a bit stuck with auto scaling of the image. in small screens, the image shows proper length and gets cut-off at 50% of width. In the larger screens, it is reverse. Image stretches to proper width. However, as the screen gets bigger, the image starts to cut off at the bottom from a height perspective and only shows top 25% on large monitors.

I am simply following the tutorial:

Any suggestions will be greatly appreciated. Thanks much in advance!


<h1>promo {</h1>

text-align:center; padding:40px; background:url(cm-reception.jpg); background-size:cover; /height:500px;/ }

<h1>promo {</h1>

text-align:center; padding:40px; background:url(performance-studio.jpg); background-size:cover; }