position text over an image in css - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Position

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

Description

position text over an image in css

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit am</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
.containerBox {<!-- ww  w . java  2s. c  o m-->
   position:relative;
   display:inline-block;
}

.text-box {
   position:absolute;
   height:100%;
   text-align:center;
   width:100%;
}

.text-box:before {
   content:'';
   display:inline-block;
   height:100%;
   vertical-align:middle;
}

h4 {
   display:inline-block;
   font-size:21px;
   color:Chartreuse;
}

img {
   display:block;
   max-width:100%;
   height:auto;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="containerBox"> 
   <div class="text-box"> 
    <h4>Lorem ipsum dolor sit amet, consectetur adip</h4> 
   </div> 
   <img class="img-responsive" src="https://www.java2s.com/style/demo/Safari.png"> 
  </div>  
 </body>
</html>

Related Tutorials