CSS background image align to center

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

Answer 2

Просто удалите ширина: 1920px; на .bg или добавить margin: auto;

Однако я не понимаю col-lg-1, если вы хотите, чтобы блок был центрирован, сделайте .col-xs-12 или, если меньше, например 6 столбцов: .col-xs-6. Col-XS-смещение-3 (смещение должно быть (12 - ширина)/2)

Answer 3

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

Если для вас высота является более важным параметром изменения фоном размера, чтобы containt:

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

Answer 4

Вы можете попробовать использовать «центр-блок» в классе или любом стиле его в CSS со следующим:

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