Creating a new header area with content image as background

So I have removed the header from single portfolio pages (pages which show the content of that selected portfolio item). I now want to move the content image into the top area and make it more of a background which covers half of the top of the screen, while overlaying my current content box slight over it.. Could someone help me with the code a bit? Here is what I want to achieve;

Here is the code I am currently looking at to edit;

<style>
#header {display:none;}
</style>
<div class="pagewidth-single">
<div class="content single single-portfolio">
    <header class="content-headarea">
        <div class="content-headarea-title">
            <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>

This is then followed by the content code ("post-content"/article) for the actual page, so I am more just focusing on the featured image part and the title etc for this section.

Website: http://outside.hobhob.uk/test