text align on top of each other in CSS and make image width of screen - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Alignment

Description

text align on top of each other in CSS and make image width of screen

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--  w w w .  jav  a 2  s  . c  o m-->
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-size:cover;
   background-position:center;
}

.large-header {
   width:100%;
   height:515px;
}

.title {
   position:absolute;
   width:81%;
   text-align:center;
   margin:0 auto;
   top:41%;
   left:61%;
   line-height:6px;
}

.demo-3 .large-header {
}
.main-title {
   color:Chartreuse;
   -webkit-transform:translate4d(-51%, -51%, 0);
   transform:translate4d(-51%, -51%, 0);
   font-family:'Fjalla One', sans-serif;
}

.main-title1 {
   color:yellow;
   -webkit-transform:translate4d(-51%, -51%, 0);
   transform:translate4d(-51%, -51%, 0);
}

.main-title2 {
   color:blue;
   -webkit-transform:translate4d(-51%, -51%, 0);
   transform:translate4d(-51%, -51%, 0);
}

.main-title3 {
   color:pink;
   -webkit-transform:translate4d(-51%, -51%, 0);
   transform:translate4d(-51%, -51%, 0);
}

.demo-1 .main-title,
.demo-3 .main-title {
   font-size:4.3em;
}

.demo-3 .main-title {
   padding:11px 41px;
   border:11px double OrangeRed;
   text-transform:uppercase;
}

@media only screen and (max-width: autopx)  {
   

}
</style> 
 </head> 
 <body> 
  <div class="container demo-1"> 
   <div class="content"> 
    <div id="large-header" class="large-header"> 
     <div class="title"> 
      <h1 class="main-title">Lorem ipsum dolor sit amet</h1> 
      <br> 
      <h2 class="main-title1">Lorem ipsum dolor sit amet, consectetur adipiscin</h2> 
      <br> 
      <h3 class="main-title2">Lorem ipsum dolor sit amet, consectetur </h3> 
      <br> 
      <div class="btn btn-warning-outline hover main-title3"> 
       <a href="" style="text-decoration: none; " class="btn-1 btn-1a ">Lorem ipsum dolor </a> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials