CodePen

HTML

            
              <div class="wrap">
  <img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
                <main>
                  <div class="content">
                  <h2>Title</h2>
               
                      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                 At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

 Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.

Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                  </div> 
            </main>
</div>


            
          
!
via HTML Inspector

CSS

            
              *{
  margin: 0;
  padding: 0;
}
.wrap {
  background: blue;
  margin: 10% auto;
  width: 70%;
  position:relative;
  text-align:center;
}
.wrap img {
  border: 1px solid black;
  height: auto;
  width: 100%;
}
main {
  background: red;
  display: block;
  border-radius:50%;
  height: 100%;
  width: 100%;
  position: absolute;
  top:0;
}

main div {
  background: green;
  overflow: auto;
  display:inline-block;
  height:70%;
  width: 70%;
  margin-top:15%;  
}



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................