Unable to commit positioning in HTML / markup

Question

Just ask for your help regarding my layout, I am trying to do the same thing as this image:

http://prntscr.com/6wrpr3

Here is my markup:

<div id="two-box">
   <div class="wrapper clearfix">
      <div class="column blue">
         <div id="circle">
            <div id="content">
               <h2>PARALLAX</h2>
               <h1>Text</h1>
               <h2>ARE COOL!</h2>
            </div>
         </div>
      </div>
      <div class="column red">
         <div id="circle-red">
            <h2>LET IT</h2>
            <h1>Fade</h1>
            <h2>RIGHT NOW!</h2>
         </div>
      </div>
   </div>
</div>
<div id="carport">
   <div class="wrapper clearfix">
      <div id="starynight"></div>
      <div id="car"></div>
      <div id="road"></div>
   </div>
</div>

ANd now for my CSS:

.wrapper {
    width: 90%;
    margin: 0 auto;
    max-width: 1140px;
}
.two-box{
    width: 100%;
}

.column{
    width: 50%;
    position: relative;
    padding: 40px 0;
}

.blue{
    background-color: #3498db;
    float: left;


}

.red{
    background-color: #e74c3c;
    float: right;

}


#content{
    margin-top: 150px;
}

.column h2{
      color: #fff;
      font-family: 'Lato', sans-serif;
      font-size: 3.5em;
      font-weight: 300;
      line-height: 1em;
      text-align: center;
      margin: 0;
}


.column h1{
      color: #fff;
      font-family: 'Pacifico', sans-serif;
      font-size: 4.2em;
       line-height: 0em;
       text-align: center;
       border-top: 4px solid #fff;
       border-bottom: 4px solid #fff;
       padding: 40px;
       margin: 0;

}


#circle{
    background-color: #3aa3e9;
    border-radius: 50%;
    width: 450px;
    height: 450px; 
    margin: 0 auto;
}

#circle-red{
    background-color: #f25a4a;
    border-radius: 50%;
    width: 450px;
    height: 450px; 
    margin: 0 auto;
}




#road{
    background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
    width: 1020px;
    height: 145px;
    display: block;
}

#car{
    background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
    width: 325px;
    height: 125;
    display: block;
    position: absolute;
    z-index: 9999;
}


#starynight{
    background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
    width: 1012px;
    height: 768px;
    display: block;
}

Here's the codepen :

Let me know if my markup and CSS have what I need to fix or show me the actual code. Thank!

Note. The main problem here is the positioning of the elements. Say I want the text and the circle to be aligned together and not have a spacer. A similar thing with the background and the car image, which they usually do not align.

Answer 1

- ? http://jsfiddle.net/4kk1fyjg/

background-position to cover, height ( px ) wrapper position to relative, .

, , .

, , right left

: http://jsfiddle.net/4kk1fyjg/2/

div, , , div - #content -, .

Answer 2

<div id="content"> -.

#starnight background-size: 100% #road.

#car relative :

float:right;
bottom:100px;
right:150px;

#content margin-top padding-top:125px;

.column h1 margin: 0 40px;

,

JSFiddle