Starting content container over bottom section of image

So I want to show my content showing over my image, but only slightly. So in a sense the image would look like it was partly the background of the page. I do not want my content box to stretch over the full width of the page like the image currently does however.

This is the page I am working on; http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2

This is what I am aiming to have it look similar to (focusing just on how the content text box is slightly over the image): https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg

Is there a way I can achieve this with maybe changing the css of the content box slightly? Maybe changing the position or z-index?

The code of the page is currently working in a typical way, I am also using Visual Composer to lay out the content in the page, so this may help me achieve this in a easier way?

<div class="pagewidth">
  <div class="content single single-portfolio">
    <div class="post-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class("post post-content-full"); ?>>
        <div class="portfolio-attachment">
          <?php
            $pi_data = get_port_item_content(get_the_ID());
            $n = 0;
            the_post_thumbnail();
            if ($pi_data) {
              foreach ($pi_data as $content_info) {
                switch ($content_info->type) {
                  case "image":
                    ?>
                      <div class="item image"><img
                        src="<?php echo $content_info->url?>"/></div>
                      <?php
                    break;
                  case "youtube":
                    //check to see if the video has any options, the ? sign
                    $has = strstr($content_info->url, "?");

                    if (!$has) {
                      $embed = explode('"', $content_info->url);
                      // insert enablejsapi option
                      $embed[5] .= "?wmode=transparent";
                      $embed = implode('"', $embed);
                    } else {
                      // insert enablejsapi option
                      $embed = str_ireplace("&", "&amp;", $content_info->url);
                      $embed = str_ireplace("?", "?wmode=transparent&amp;", $embed);
                    }

                    // get original dimensions
                    $pattern = "/height="[0-9]*"/";
                    preg_match($pattern, $embed, $matches);
                    $origHeight = preg_replace("/[^0-9]/", '', $matches[0]);

                    // compute new height
                    //$newHeight = $origHeight + 25;
                    $newHeight = $origHeight;

                    // adjust embed code
                    $pattern = "/height="[0-9]*"/";
                    $embed = preg_replace($pattern, "height='" . $newHeight . "'", $embed);

                    // insert an id for the iframe
                    $id = '<iframe id="ytplayer' . $n . '" ';
                    $embed = str_ireplace("<iframe ", $id, $embed);
                    ?>
                      <div class="item youtube fitvid"><?php echo $embed?></div>
                      <?php
                    break;
                  case "vimeo":
                    $embed = $content_info->url;
                    ?>
                      <div class="item vimeo fitvid"><?php echo $embed?></div>
                      <?php
                    break;
                }
                //end switch
                $n++;
              } //end for each
            }//end if
          ?>
      </div>
</div></div></div>
<div class="pagewidth-single">
<div class="content single single-portfolio">
  <div class="post-content">
    <header class="content-headarea">
      <div class="content-headarea-title">
&nbsp;
&nbsp;
        <h1 class="post-title"><?php the_title(); ?></h1>
        <ul class="portfolio-meta">
          <?php $client = get_post_meta(get_the_ID(), 'client', true); ?>
          <?php if (!empty($client)) : ?>
          <li class="client">
            <span class="portfolio-meta-heading"><?php _e('Client: ', 'framework'); ?></span>
            <span><?php echo $client ?></span>
          </li>
          <?php endif; ?>
          <?php $date = get_post_meta(get_the_ID(), 'date', true); ?>
          <?php if (!empty($date)) : ?>
          <li class="date">
            <span class="portfolio-meta-heading"><?php _e('Date: ', 'framework'); ?></span>
            <span><?php echo $date ?> </span>
          </li>
          <?php endif; ?>
          <?php $lproj = get_post_meta(get_the_ID(), 'url', true);
          if (!empty($lproj)) :
          ?>
          <li class="launch">
            <span class="portfolio-meta-heading"><?php _e('url', 'framework'); ?></span>
            <a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>"
              class="superlink"
              title="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>">
              <?php echo get_post_meta(get_the_ID(), 'url', true); ?>
            </a>
          </li>
          <?php endif; ?>
        </ul>
      </div>
    </header>      
        <div class="blog-post">
          <div class="full-post">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              <?php the_content(); ?>
            <?php endwhile; ?>
            <?php else:?>

            <?php endif; ?>
          </div>
        </div>

        <?php get_template_part( '/includes/share'); ?>
        <?php comments_template(); ?>

        <nav id="post-nav">
          <div class="post-nav-inner">
            <div class="nav-previous"><?php next_post_link( '%link', __( 'Next Post &rarr;', 'framework' ) ); ?></div>
            <div class="nav-next"><?php previous_post_link( '%link', __( '&larr; Previous Post', 'framework' ) ); ?></div>
            <div class="clearfix"></div>
          </div>
        </nav>

      </article>
    </div>
  </div>
</div>

So I am looking to start the overlay on the <header> section, from the page title onwards, while keeping the featured image as the full width background'ish half section. I want to avoid having the image basically cover the screen and so you can begin to see the content starting without needing to scroll down.