jquery - CSS 背景图片居中对齐

Question

我在 div 上有背景图片，图片大小为 1920px x 850px。我有某种形式，它总是必须在这个 div 的中心，如果用户更改屏幕大小或使用较低的分辨率，此表单也应始终居中，背景图像也应居中(图像的左侧和右侧不太重要)如何实现此行为。我在这个页面上也有一些 bootstap CSS

.bg
{

    height: 850px;
    padding: 0px;
    zoom: 1;
    display: block;
    *display: inline;
    *float: none;
    background-image: url('full.png');
    background-repeat:no-repeat;
    background-color:white;
    background-size: 100% auto;
    background-position:center top;
    width: 1920px;   
}

   <div class="row-fluid bg" id="formPart">
            <div class="col-lg-1">
                <div class="span4 top200 subTitle">
                    @Html.Raw(T.Get("/LP/MainTitle"))
                </div>                  
                @using (Html.BeginForm("MyPage", Member",FormMethod.Post))
                {
                    @Html.AntiForgeryToken()                               
                    @Html.ValidationSummary(true)
                    <div class="span4 top25 left30">
                        @Html.LabelFor(model => model.Login)

                    </div>
                    <div class="span4 left30 inputSize">
                        @Html.EditorFor(model => model.Login)
                        @Html.ValidationMessageFor(model => model.Login)
                    </div>
                    <div class="span4 left30">
                        @Html.LabelFor(model => model.Email)
                    </div>
                    <div class="span4 left30 inputSize">
                        @Html.EditorFor(model => model.Email)
                        @Html.ValidationMessageFor(model => model.Email)

                    </div>
                    <div class="span4 left30">
                        @Html.LabelFor(model => model.Password)
                    </div>
                    <div class="span4 left30 inputSize">
                        @Html.PasswordFor(model => model.Password)
                        @Html.ValidationMessageFor(model => model.Password)

                    </div>
                    <div class="span4 top15 bussines">
                        @Html.Raw(T.Get("/LP/SmallLinks"))
                    </div>

                    <div class="span4 top35">
                        @Html.ValidationMessage("error")
                        <a href="#" id="submitData">
                            <div class="span2 btnSun">
                                <div class="span2 top10 btnText">
                                    <div class="btnNewText play @Model.Culture.ToString()">@Html.Raw(T.Get("/LP/PlayButton"))</div>
                                </div>
                            </div>
                        </a>
                    </div>
                }

            </div>           
        </div>

Answer 1

在 css-tricks.com 上有很多 CSS 技巧。希望这对您的情况有所帮助。

Perfect full page background image