Position image next to div perfectly - html

Question

How do i place the image perfectly like this in various screen sizes?
.background-login {
background: url(../img/login.png) no-repeat;
background-size: 100%;
z-index: -2;
position: absolute;
top: 8%;
min-height: 400px;
right: 2%;
height: 100%;
}
.background-login-create {
background: url(../img/login.png) no-repeat;
background-size: 100%;
z-index: -2;
position: absolute;
top: 17%;
min-height: 400px;
right: 2%;
height: 100%;
}
.background-login-create-profile {
background: url(../img/login.png) no-repeat;
background-size: 100%;
z-index: -2;
position: absolute;
top: 13%;
min-height: 400px;
right: 2%;
height: 100%;
}
.sellfie-start-text {
font-size: 15px;
padding: 145px;
text-align: center;
font-weight: 200;
position: relative;
top: 8%;
vertical-align: middle;
color: #FFF;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container div-login">
<div class="row">
<div class="col-sm-5 col-md-offset-1">
<div class="center">
<h2 class="login-title"></h2>
<h4></h4>
<p class=""></p>
</div>
<div class="account-wall">
<p class="profile-name">Hello!<span style="color:red">:)</span></p>
<p class="profile-desc">We require only your mobile number for both login and signup</p>
<br>
<div class="form-signin">
<div class="md-form">
<input type="text" placeholder="Enter Mobile Number" value="" name="mobile_number" id="mobile_number" class="mobile_number form-control">
</div>
<button class="btn btn-main btn-continue" id="continue">
CONTINUE</button>
<div class="form-signin-bottom">By clicking on Continue, you agree to our Privacy Policy
& Terms
</div>
</div>
</div>
</div>
<div class="col-sm-6 background-login">
<div class="sellfie-logo">
<img src="img/sellfie_white.png"/>
</div>
<div class="sellfie-start-text">
Sellfie is the easiest way to sell online and collect payments for your products & services on social networks
and online channels.
</div>
</div>
</div>
</div>
What if the left container is larger i want my right image to be the same height as the left container?
.background-login {
background: url(../img/login.png) no-repeat;
background-size: cover;
z-index: -2;
position: absolute;
margin-top: 50px;
right: 2%;
min-height:400px;
height: 100%;
}

Answer 1

I have added wrapper inside background-login element and some CSS to make it center aligned.
In .background-login CSS, set background-size: cover (this will make image cover the whole element)
I also removed top and right values, don't set position values on Bootstrap columns because they will break the layout.
body {
background-color: #ddd !important;
}
.form-left,
.background-login {
height: 400px;
}
.form-left {
background-color: white;
}
.background-login {
position: relative;
background: url(https://unsplash.it/600/400) no-repeat;
background-position: center center;
background-size: cover;
}
.background-login .wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 30px;
text-align: center;
}
.sellfie-start-text {
font-size: 15px;
text-align: center;
font-weight: 200;
position: relative;
top: 8%;
vertical-align: middle;
color: #FFF;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container div-login">
<div class="row">
<div class="col-sm-5 col-md-offset-1 form-left">
<div class="center">
<h2 class="login-title"></h2>
<h4></h4>
<p class=""></p>
</div>
<div class="account-wall">
<p class="profile-name">Hello!<span style="color:red">:)</span></p>
<p class="profile-desc">We require only your mobile number for both login and signup</p>
<br>
<div class="form-signin">
<div class="md-form">
<input type="text" placeholder="Enter Mobile Number" value="" name="mobile_number" id="mobile_number" class="mobile_number form-control">
</div>
<button class="btn btn-main btn-continue" id="continue">
CONTINUE</button>
<div class="form-signin-bottom">By clicking on Continue, you agree to our Privacy Policy
& Terms
</div>
</div>
</div>
</div>
<div class="col-sm-6 background-login">
<div class="wrapper">
<div class="sellfie-logo">
<img src="img/sellfie_white.png"/>
</div>
<div class="sellfie-start-text">
Sellfie is the easiest way to sell online and collect payments for your products & services on social networks
and online channels.
</div>
</div>
</div>
</div>
</div>

Answer 2

#details {
display: inline-block;
vertical-align:middle;
border:solid black 1px;
width: 300px;
}
.photo {
display: inline-block;
vertical-align:middle;
width: 300px;
height: 300px;
border: 1px solid #d1c7ac;
}