make the background responsive and keep content centered - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

make the background responsive and keep content centered

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body {<!--  w  ww .j av  a  2s  .com-->
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat center center;
   background-size:cover;
}

.h1Tag {
   padding:0px;
   font-size:151%;
   text-align:center;
   font-family:Arial, Helvetica, sans-serif;
   color:Chartreuse;
}

ul {
   list-style-type:none;
   margin:0;
   padding:0;
   overflow:hidden;
   background-color:yellow;
}

li {
   float:center;
}

a:hover:not(.active) {
   background-color:blue;
   text-decoration:none;
}

li a {
   display:block;
   text-align:center;
   padding:15px 17px;
   text-decoration:none;
   color:pink;
   font-weight:bold;
}

#login_form {
   background-color:OrangeRed;
   padding:21px;
   position:relative;
   margin-left:auto;
   margin-right:auto;
   margin-top:151px;
   border-radius:4px;
   border:2px solid;
   border-color:grey;
   width:251px;
}

.login_form {
   text-align:center;
   font-size:21px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="login_form"> 
   <div class="h1Tag"> 
    <h1>Lorem ip</h1> 
   </div> 
   <div class="login_form"> 
    <input type="text" name="email" id="email" placeholder="Email address"> 
    <br> 
    <input type="password" name="password" id="password" placeholder="Password"> 
    <br> 
    <br> 
    <button type="submit" id="submit" name="submit">Lorem </button> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials