CSS背景圖片對齊中心

Question

我的div尺寸背景圖片為1920px x 850px。 並且我有某種形式，該形式必須始終位於此div的中心，如果用戶更改屏幕大小或使用較低的分辨率，則此形式也應始終位於中心，背景圖像也應居中（左右兩側）圖片的重要性不高）如何實現此行為。 我在此頁面上也有一些引導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

.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-attachment: fixed;
       -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
}

嘗試添加

  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;

如果對您來說身高更重要，則將參數backround-size更改為包含：

background-attachment: fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
 background-size: contain;

Answer 2

在css-tricks.com中，CSS有很多技巧。 希望這對您的情況有所幫助。

完美的整頁背景圖片

Answer 3

只需刪除寬度：1920px； 在.bg上或添加邊距：自動；

但是，我不了解col-lg-1，如果您希望將塊居中，請執行.col-xs-12或更小（例如6列）：.col-xs-6.col-xs-偏移量3（偏移量必須為（12-寬度）/ 2）

Answer 4

您可以嘗試在類中使用“ center-block”，也可以在CSS中使用以下樣式：

#div {
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}