HTML :Responsive Background Sign In

HTML :Responsive Background Sign In .markdown

HTML :Responsive Background Sign In

A Pen by Ry Arush on CodePen.

License.

index.html

<div id="splash">
  <div class="mobile-wrapper">
    <div class="td">
      <h1><img class="img-logotl" src="http://dashboard.teledirectasia.com/wp-admin/images/tl-logo.svg"></h1>    
      <p class="signin-btn"><a href="#" class="btn btn-primary btn-lg merah" role="button">Sign In</a></p>
    </div>
  </div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

html, body{
  height: 100%;
}
body { 
			background-image: url(http://dashboard.teledirectasia.com/wp-content/themes/teledirectasia/images/sp/2.jpg) ;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: fixed;
			background-size:  cover;
			background-color: #999;
  
}

div, body{
  margin: 0;
  padding: 0;
  }

.mobilewrapper {
  height: 100%; 
  width: 100%; 
}

h1{
  text-align:center;
}

.td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%; 
  height:100%;
  top: 30; 
  display: block;
  position: absolute;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 1em;
}

.signin-btn{
  bottom: 0; 
  padding-top:200px
}


.img-logotl{
  max-width:300px;
}
.merah {
    width: 100%;
    background: #ea171d !important;
    margin-top: 10px !important;
    border-color: #ea171d !important;
    height: 40px !important;
    box-shadow: inset 0 1px 0 rgba(120,200,230,.0) !important;
    font-size: 18px !important;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px !important;
}

.merah:hover {
	background:#b4b4b4 !important;
	border-color: #b4b4b4 !important;
	webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
	transition: all 0.2s;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />