background in div is not resizing in bootstrap

Question

When adding a background to a div and resizing the screen the background image stays where it is and does not respond to resizing in the new smaller screen

 <section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 style="color: #adaaad">contact</h2>
                <br>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
                <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
                <form name="sentMessage" id="contactForm" novalidate>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label class="aligntextright">name</label>
                            <input type="text" class="form-control" placeholder="name" id="name" required data-validation-required-message="name">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label class="aligntextright">email</label>
                            <input type="email" class="form-control" placeholder="email" id="email" required data-validation-required-message="input email">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label class="aligntextright">number</label>
                            <input type="tel" class="form-control" placeholder="number" id="phone" required data-validation-required-message=" input number">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label class="aligntextright">message</label>
                            <textarea rows="5" class="form-control" placeholder="message" id="message" required data-validation-required-message="enter message"></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-success btn-lg">send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

#contact{
    background: url("img/style.png") no-repeat right 0;
}

Answer 1

This Css works fine

background-size: 100% auto;