Problem with Twitter Bootstrap

Question

I’m wanting to do on my website, something similar to this model:

http://livedemo00.template-help.com/wordpress_49159/#homepage

I’m just having trouble positioning the image between a div and another!

Follows my code:

<header class="navbar-wrapper header">
      <div class="container">
        <div class="row">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        </div>
        <div class="row text-center">
                <div class="col-lg-12">
                    <h1>Web Design Moderno <br> e Inteligente</h1>
                    <p>Meu nome é Luciano Oliveira. Eu sou um web designer e consultor web. Buscar e encontrar as melhores formas para uma desenvolvimento web criativo, criando sites e sistemas que oferece aos consumidores um exelente desempenho para atingir as metas especificadas.</p>
                </div>

        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="header-photo">
                    <figure>
                        <img title="Coder. Designer. Professional." alt="Mark Anderson" src="img/luciano.png">
                    </figure>
                </div>
            </div>
        </div>
      </div>
    </header>

Follows the CSS:

body { padding-top: 50px; }


.header {
    background-attachment: scroll;
    background-image: url("img/bg1.jpg");
    background-position: center top;
    background-size: cover;
    border-bottom: 6px solid #e6795c;
    margin-bottom: 80px;
    padding: 0;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
    position: relative;
    z-index: 99;
}
.header-photo {
    text-align: center;
}
.header-photo figure {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 100%;
    display: inline-block;
    margin: 0;
    padding: 16px;
    position: relative;
    vertical-align: top;
}

Answer 1

You can do using position:absolute; and positioning the object according to the size.

For your model I did as follows:

CSS

.header-content{
  margin-bottom:60px;
}

.header-photo {
    text-align: center;
    position:absolute;
    bottom:-110px;
    width:300px;
    left:50%;
    margin-left:-150px;
    margin-top:100px;

}

.header-photo figure {
    background-color: rgba(51, 180, 224, 0.8);
    border-radius: 100%;
    display: inline-block;
    margin: 0;
    padding: 16px;
    position: relative;
    vertical-align: top;
}

HTML

In HTML I just added the class header-content in the content of header and copied the row of the content to after the header.

Upshot

Note that you have to take into account the size of the image to position it correctly.

PS.: This is just a quick sketch, you can have a much better code working on top of these "coordinates".