Make Image taller than background color - html

Question

I want to make a banner which has an image with transparent background on the right and some text and button on the left side.
I have made a two column layout one containing the text and other containing the image displayed horizontally on large screen and stacked reversely on smaller screen.next I want to add some background color to both the columns so that they look like one entity. However I want the image to overflow the background color on top so that it
looks some thing like this
But My current design looks like this:
Here is my 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>
See What You Can Earn
</div>
</div>
</div>
</div>
</div>
I tried using padding and margin on top but did not work, please suggest a solution.

Answer 1

Use position to make it upper and increase image height.
.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>
See What You Can Earn
</div>
</div>
</div>
</div>
</div>