Background overlay:image and text - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Background overlay:image and text

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">

.bG<!--  w  w w  . j a v  a2  s  . c  om-->
{
   background-image:url(https://www.java2s.com/style/demo/InternetExplorer.png);
   background-repeat:no-repeat;
   background-attachment: scroll;
   background-position:center center;
   position:absolute;
   left:50%;
   top:50%;
   width: 650px;
   height: 500px;
   margin-left:-459px;
   margin-top:-340px;
   padding-left:300px;
   padding-top:180px;
}
.txt
{
   text-align: center;
   font-size: 24pt;
   font-weight: bold;
   margin-top: 70px;
}
.text{
   z-index:1000;
   position:relative;
}


      </style> 
 </head> 
 <body> 
  <div style="position:relative;"> 
   <div class="txt"> 
    <p class="text">Text!</p> 
    <div class="bG"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials