CSS for fit image to table cell with text overlay - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

CSS for fit image to table cell with text overlay

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">
bkgImg {<!--   ww  w  .ja v  a  2  s.  co m-->
   text-align:center;
   width:451px;
   height:451px;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td class="bkgImg"> <span style="font-size:40px;color:darkgreen;text-shadow: 2px 2px 2px #fff;background-color:#000;padding:6px;">Lorem ips</span> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials