Floating image over same location as background image responsively - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Floating image over same location as background image responsively

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">
.imgCat {<!--   w w  w. jav a  2 s  .  co m-->
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   max-width:201px;
   height:201px;
   position:relative;
}

.catEye {
   position:absolute;
   left:76px;
   top:96px;
   width:31px;
   height:31px;
   display:block;
   border:3px solid Chartreuse;
   border-radius:51%;
}
</style> 
 </head> 
 <body> 
  <div class="imgCat"> 
   <span class="catEye"></span> 
  </div>  
 </body>
</html>

Related Tutorials