div中的背景没有在bootstrap中调整大小

时间:2016-08-09 14:32:51

标签: html css twitter-bootstrap css3 twitter-bootstrap-3

在为div添加背景并调整屏幕大小时,背景图像会保持原样,并且不响应在新的较小屏幕中调整大小

 <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;
}

1 个答案:

答案 0 :(得分:1)

这个Css工作正常

background-size: 100% auto;