Aligning absolute positioned elements with backgrounds - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Aligning absolute positioned elements with backgrounds

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style class="cp-pen-styles">
.wrap {<!--   w  w w .ja  va  2s  . c o m-->
   background: url('https://www.java2s.com/style/demo/Opera.png') top center no-repeat;
   background-size: cover;
   width: 500px;
   height: 500px;
   margin:0 auto;
   position: relative;
}
.thing {
   position: absolute;
   top: 45%;
   left: 45%;
}

      </style> 
   </head> 
   <body> 
      <div class="wrap"> 
         <div class="thing">
             x 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials