Загрузочные Divs или фоновое изображение, закрытое контейнером

#html #css #twitter-bootstrap #background-image

#HTML #css #twitter-bootstrap #фоновое изображение

Вопрос:

У меня возникла проблема, из-за которой мой стиль страницы с контейнером bootstrap div для входа в формы и логотипа верхней части, однако эта часть закрывала или закрывала мое предполагаемое фоновое изображение, стилизованное с использованием CSS

 html{
  background: url("Bg1.jpg")no-repeat center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  margin:0;
}

и мои 2 контейнера, где я размещаю логотип сверху, а знак в форме посередине

 <div class="container"><!--top portion-->
  <div class="row"> <!--logo portion-->
<div class="col-sm-3 col-xs-12">
  <a href="#"><img class="image-responsive img-rounded" alt="B-Flight" src="Logo1.png" id="banner" /></a>
</div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
</div><!--row-->

  <div class="container">
  <div class="row">
<div class="col-xs-12 col-sm-4"></div><!--left column of whole page-->
<div class = "col-xs-12 col-sm-4">
<title>Login</title>
  <form class="form-signin">
    <h2 class="form-signin-heading align-center">Sign In</h2>
    <label for="usrName" class="Titlefont">User Name</label>
    <input type="text" id="usrName" class="form-control" placeholder="user name" required autofocus><br>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    <br>
    <a href="signup.html"><button class="btn btn-link btn-block" type="button">Not registered? Sign up now</button></a>
  </form>
</div><!--set alignment-->
<div class="col-xs-12 col-sm-4"></div><!--right column of the page-->
</div><!--row-->
</div> <!-- /container -->

И там фотография снимка экрана

Буду признателен, если кто-нибудь сможет помочь

Спасибо

1. Вероятно, вам нужно добавить свойство background:none; к элементам, которые покрывают предполагаемый фон. Firebug (firefox) — хорошая помощь в поиске элемента. Из того, что вы показываете, трудно сказать, потому что в CSS отсутствуют элементы, которые вызывают это.

2. Я просто попытался добавить background:none; в .container{...} класс в CSS. Однако, похоже, это все еще не решает проблему. Но я ценю ваше время, чтобы ответить и дать ответ 🙂

Ответ №1:

По умолчанию цвет фона body установлен на белый. Поэтому, когда вы создаете свой стиль html body , он не является целевым и остается белым. Вместо этого вы можете попробовать использовать

 html, body {
    /* Your CSS goes here */
}

Это должно решить вашу проблему.