Bild größer als Hintergrundfarbe machen

Question

Ich möchte ein Banner mit einem Bild mit transparentem Hintergrund auf der rechten Seite und etwas Text und Knopf auf der linken Seite machen.

Ich habe ein zweispaltiges Layout gemacht, das den Text und andere enthält, die das Bild horizontal auf einem großen Bildschirm und umgekehrt auf kleineren Bildschirm gestapelt.next Ich möchte etwas Hintergrundfarbe zu beiden Spalten hinzufügen, so dass sie wie eins aussehen Entität. Aber ich will das Bild der Hintergrundfarbe auf der Oberseite überzulaufen, so dass es

looks some thing like this

But My current design looks like this:

Hier ist mein Code:

.row { 
 
    background-color: #fff; 
 
    padding-top: 20px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.textstyle h1 { 
 
    font-size: 25px; 
 
    font-weight: 700; 
 
    color: #484848; 
 
    line-height: 30px; 
 
} 
 

 
.textstyle p { 
 
    font-size: 18px; 
 
    font-weight: 200; 
 
    color: #484848; 
 
} 
 

 
.imgbox { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
.captionbox { 
 
    padding-top: 80px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
.backcolor { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
.mybutton { 
 
    cursor: pointer; 
 
    background: #00A699 !important; 
 
    color: #fff; 
 
    border-radius: 20px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
} 
 

 
@media (max-width: 1000px) { 
 
    .captionbox { 
 
     padding-top: 10px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
<div class="row"> 
 

 
    <div class="backcolor"> 
 
     <div class="col-md-7 col-md-push-5"> 
 
      <div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div> 
 
     </div> 
 
     <div class="col-md-5 col-md-pull-7"> 
 
      <div class="textstyle captionbox"> 
 
       <h1>Hosting Opens Up a world of opportunity</h1> 
 
       <p>Earn Money Sharing Your Extra Space with Travellers.</p> 
 
       <a href="https://google.com" target="_blank" class="btn btn-default mybutton">See What You Can Earn</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

ich versucht, mit Padding und Rand oben, aber hat nicht funktioniert, schlagen Sie bitte eine Lösung vor.

Answer 1

Verwenden Sie die Position, um es höher zu stellen und die Bildhöhe zu erhöhen.

.imgbox{ 
    width: 100%; 
    height: 430px; 
    position: absolute; 
    top: -30px; 
} 

.row{ 
 
    background-color: #fff; 
 
    padding-top: 20px; 
 
    padding-bottom: 10px; 
 
} 
 
.textstyle h1{ 
 
    font-size: 25px; 
 
    font-weight: 700; 
 
    color:#484848; 
 
    line-height: 30px; 
 
} 
 
.textstyle p{ 
 
    font-size:18px; 
 
    font-weight:200; 
 
    color:#484848; 
 
} 
 
.imgbox{ 
 
width: 100%; 
 
height: 430px; 
 
position: absolute; 
 
top: -30px; 
 
} 
 
.captionbox{ 
 
padding-top: 80px; 
 
padding-left: 20px; 
 
padding-right: 20px; 
 
} 
 
.backcolor{ 
 
background-color: #ccc; 
 
width: 100%; 
 
height: 400px; 
 
} 
 
.mybutton{ 
 
cursor: pointer; 
 
background: #00A699 !important; 
 
color: #fff; 
 
border-radius: 20px; 
 
width:200px; 
 
padding:10px; 
 
font-size: 16px; 
 
} 
 
@media (max-width: 1000px){ 
 
.captionbox{ 
 
    padding-top: 10px; 
 
} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
      <div class="row"> 
 
       
 
       <div class="backcolor"> 
 
       <div class="col-md-7 col-xs-7 col-md-push-5 col-xs-push-5"><div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div></div> 
 
       <div class="col-md-5 col-xs-5 col-md-pull-7 col-xs-pull-7"> 
 
        <div class="textstyle captionbox"> 
 
        <h1>Hosting Opens Up a world of opportunity</h1> 
 
         <p>Earn Money Sharing Your Extra Space with Travellers.</p> 
 
         <a href="https://google.com" target="_blank" class="btn btn-default mybutton">See What You Can Earn</a> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
     </div>