Position image next to div perfectly

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 <a href="">Privacy Policy</a>
            & <a href="">Terms</a>
          </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%;

}

Do you want something like this link:-https://css-tricks.com/perfect-full-page-background-image/ — Razia sultana, Oct 04 '16 at 13:52
I've made this simple [fiddle](https://jsfiddle.net/4jjrjy5j/) that makes use of relative and absolute positioning. Your container should be relative and your left AND right content should be absolute. Try and alter the `wrapper` width and height in my [fiddle](https://jsfiddle.net/4jjrjy5j/) and you can see the content will change aswell. [Usefull sample](https://css-tricks.com/absolute-positioning-inside-relative-positioning/) — Roy123, Oct 04 '16 at 13:55
Solution for column equal height: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Nhan, Oct 04 '16 at 14:33

score 1 · Answer 1 · answered Oct 04 '16 at 14:09

1

#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; 
}

answered Oct 04 '16 at 14:09

Razia sultana

2,168
3
15
20

Nhan · Accepted Answer · 2016-10-04T14:30:55.750

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 <a href="">Privacy Policy</a>
            & <a href="">Terms</a>
          </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>

How do i make the height of the left container and the right image the same ? — vini, Oct 04 '16 at 14:28

Position image next to div perfectly

2 Answers2