Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div id="mainHeaderWrapper">
   <img src="http://placehold.it/400x240/cf5"><!-- I'm invisible! yey!-->
   <div>
       <p>Lorem ipsum</p> 
   </div>
</div>
  Notice the DIV border-bottom?
  
</body>
</html>
 
*{margin:0;}
#mainHeaderWrapper{
    position:relative;
    background: no-repeat url(http://placehold.it/400x240/cf5) 50% / 100%;
    border-bottom: 2px solid #000;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width:100%;
    height:100%;
}
#mainHeaderWrapper p{
   padding:30px;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers