CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbackground-image
Byron Wong
Byron Wong

Reputation: 155

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

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

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

And there photo of it screen shot

Appreciate if anyone be able to help out

Thanks

Upvotes: 2

Views: 946

Answers (1)

doefom
doefom

Reputation: 66

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.

Upvotes: 4

Related Questions