Bootstrap cover image doesn't resize on mobile

Question

I have the following cover image which looks great on desktop. The headshot is on the right so when I view the page on mobile the headshot is cutoff.

How do I make it so the image is resized when going to mobile?

Here's my bootply: http://www.bootply.com/KVei4t3ABg

Here's my html:

<div class="intro-header">
    <div class="container">

        <div class="row">
            <div class="col-lg-7">
                <div class="intro-message">
                    <h1>Title</h1><br>
                    <p class="subtitle">Search the most comprehensive online library </p>
                    <p class="intro-divider"></p>
                     <a href="https://www.apple.com" class="btn btn-primary btn-lg">
                       Register for a Free Account
                     </a>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->
</div>

Here's my css:

.intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: left;
    color: #f8f8f8;
    background: url(http://www.onvia.com/exchange/img/background_test.jpg) no-repeat center center;
    background-size: cover;
}

Answer 1

Your background image is very wide, but the relevant portion is narrow. I'd consider stripping the gray background, replacing it with CSS color, and setting your portrait to the right edge at all times. Considering the sliced-off shoulder, this is probably a good idea anyway.

.intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
    color: #f8f8f8;
    background: url( ... ) no-repeat right center;
    background-size: contain;
    background-color: #ddd;
}

Demo