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

.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 to containt：

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

Answer 2

在css-tricks.com中有很多CSS技巧。这个希望它可以帮助你的情况。

Perfect full page background image

Answer 3

删除宽度：1920px;在.bg或添加margin：auto;

但是我不理解col-lg-1，如果你想让块居中，做一个.col-xs-12，或者如果更小，例如6列：.col-xs-6.col -xs-offset-3（偏移量必须为（12 - 宽度）/ 2）

Answer 4

您可以尝试在课程中使用“center-block”，或者使用以下内容在css中设置样式：

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

CSS背景图像对齐到中心

4 个答案: