user7008 user7008 - 1 year ago 154
CSS Question

Bootstrap Divs or Container covered background image

I have this problem whereby my page style with bootstrap div container for the sign in forms and top portion logo, this part however covered or blank out my intended background image styled using CSS

background: url("Bg1.jpg")no-repeat center fixed;

and my the 2 containers where I place a logo on top and the sign in form in the middle

<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 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 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">
<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">
<input type="checkbox" value="remember-me"> Remember me
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<a href="signup.html"><button class="btn btn-link btn-block" type="button">Not registered? Sign up now</button></a>
</div><!--set alignment-->
<div class="col-xs-12 col-sm-4"></div><!--right column of the page-->
</div> <!-- /container -->

And there photo of it screen shot

Appreciate if anyone be able to help out


Answer Source

By default the background-color of body is set to white. So when you style your html the body is not targeted and still white. You might instead want to try using

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

This should solve your problem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download