Bootstrap Div 或 Container 覆盖背景图片
Bootstrap Divs or Container covered background image
我有这个问题,我的页面样式带有 bootstrap div 容器用于登录表单和顶部徽标,但是这部分覆盖或空白了我使用 [= 设置样式的预期背景图像24=]
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 -->
还有它的照片screen shot
如果有人能提供帮助,我们将不胜感激
谢谢
默认情况下,body
的背景色设置为白色。
因此,当您为 html
设置样式时,body
没有针对性且仍然是白色。
您可能想尝试使用
html, body {
/* Your CSS goes here */
}
这应该可以解决您的问题。
我有这个问题,我的页面样式带有 bootstrap div 容器用于登录表单和顶部徽标,但是这部分覆盖或空白了我使用 [= 设置样式的预期背景图像24=]
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 -->
还有它的照片screen shot
如果有人能提供帮助,我们将不胜感激
谢谢
默认情况下,body
的背景色设置为白色。
因此,当您为 html
设置样式时,body
没有针对性且仍然是白色。
您可能想尝试使用
html, body {
/* Your CSS goes here */
}
这应该可以解决您的问题。