Use featured image from wordpress in css

I am making a content page for my portfolio items on my website and I have set a space for the featured image of the post to slot into, however when ever I try and add it, it either does not show or just shows giant (original size).

How would I be able to make it appear in my background header image section? Currently the grey fuzzy texture image – http://outside.hobhob.uk/test/portfolio/print/

I have managed to get the content from the post showing, the current images.

I have tried placing the following code in the <section> code area but I am yet to get anywhere near. Any help would be great. I am struggling to find anything online that works.

The code empty is:

<section id="banner">

</section>

What I have tried and failed with is:

<section id="banner">
<?php 
    global $post; 
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); 
?>
</section>

and also

<section id="banner">

<?php the_post_thumbnail(); ?>


</section>

Ideally I want to have the featured image replace this image code in the CSS;

#banner {
  background-attachment: scroll,               fixed;
  background-color: #666;
  background-image: url("images/overlay.png"), url("../../images/banner.jpg");
  background-position: top left,               center center;
  background-repeat: repeat,                   no-repeat;
  background-size: auto,                       cover;
  color: #fff;
  padding: 12em 0 20em 0;
  text-align: center;
}