Плавающий образ в пути, который он выталкивает из div

Question

Я хочу, чтобы плавать изображение таким образом, что оно выходит из div. Я даже добавил отрицательный запас для изображения, но происходит то, что изображение iPhone постоянно усекается.

Я также попытался включить высоту и ширину изображения, но ничего не работает.

Пожалуйста, помогите.

.blue-wrapper { 
 
    background: #41A7D3; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.blue { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
.blue-left { 
 
    float: left; 
 
    width: 39%; 
 
} 
 
.blue-left img { 
 
    display: block; 
 
    margin-top: -100px; 
 
    width: 380px; 
 
    height: 739px; 
 
} 
 
.blue-right { 
 
    float: right; 
 
    width: 61%; 
 
    color: #FFFFFF; 
 
}

<div class="blue-wrapper"> 
 
    <div class="blue"> 
 

 
    <div class="blue-left"> 
 
     <img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone"> 
 
    </div> 
 
    <!-- Blue Left --> 
 

 
    <div class="blue-right"> 
 

 
     <div class="blue-text"> 
 
     <h2>What ComeAgain Can Do for Your Business</h2> 
 
     <p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea. Ea utamur persecuti vis. Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas. Ut legere vocibus fierent nec, ei dicit 
 
      everti patrioque sed. Mel verear impetus et, fugit vocent ut nam. 
 
     </p> 
 

 
     <h3>How ComeAgain Works</h3> 
 
     <ul> 
 
      <li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li> 
 
      <li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li> 
 
     </ul> 
 
     </div> 
 
     <!-- Blue Text --> 
 

 
     <div class="blue-button"> 
 
     <a href="#">Get Registered</a> 
 
     </div> 
 
     <!-- Blue Button --> 
 

 
    </div> 
 
    <!-- Blue Right --> 
 

 
    </div> 
 
    <!-- Blue --> 
 
</div> 
 
<!-- Blue Wrapper -->

Answer 1

.blue-wrapper { 
 
\t background: #41A7D3; 
 
\t width: 100%; 
 
} 
 

 
.blue { 
 
\t width: 1000px; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
.blue-left { 
 
\t float: left; 
 
\t width: 39%; 
 
    position: relative; 
 

 
} 
 

 
.blue-left img { 
 
    display: block; 
 
    top: 100px; 
 
\t width: 380px; 
 
\t height: 739px; 
 
    position: absolute; 
 
} 
 
\t 
 

 
.blue-right { 
 
\t float: right; 
 
\t width: 61%; 
 
\t color: #FFFFFF; 
 
} 
 
.clearfix:after { 
 
visibility: hidden; 
 
display: block; 
 
font-size: 0; 
 
content: " "; 
 
clear: both; 
 
height: 0; 
 
} 
 
.clearfix { display: inline-block; } 
 
/* start commented backslash hack \*/ 
 
* html .clearfix { height: 1%; } 
 
.clearfix { display: block; } 
 
/* close commented backslash hack */

<div class="blue-wrapper clearfix"> 
 
        <div class="blue"> 
 
        \t \t \t 
 
           <div class="blue-left"> 
 
           \t \t <img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone"> 
 
           </div><!-- Blue Left --> 
 
           
 
           <div class="blue-right"> 
 
           \t \t 
 
             <div class="blue-text"> 
 
               <h2>What ComeAgain Can Do for Your Business</h2> 
 
               <p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea. 
 
               Ea utamur persecuti vis. 
 
               Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas. 
 
               Ut legere vocibus fierent nec, ei dicit everti patrioque sed. Mel verear impetus et, fugit vocent ut nam. 
 
               </p> 
 
               
 
               <h3>How ComeAgain Works</h3> 
 
               <ul> 
 
                <li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li> 
 
                <li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li> 
 
               </ul> 
 
             </div><!-- Blue Text --> 
 
             
 
             <div class="blue-button"> 
 
             \t \t <a href="#">Get Registered</a> 
 
             </div><!-- Blue Button --> 
 
           
 
           </div><!-- Blue Right --> 
 
        
 
        </div><!-- Blue --> 
 
\t </div><!-- Blue Wrapper -->

Для фона следует добавить .clearfix на обертке.