if I understand your question correctly, this is usually done with a wrapper within the banner.
Example:
HTML:
<div class="banner">
<div class="wrapper">
<h1>Example Title</h1>
</div>
</div>
CSS:
.banner {
background: url(/* Your image */) center center no-repeat;
background-size: cover;
height: /* Whatever height */;
}
.wrapper {
margin: 0 auto; /* This is what centers it */
max-width: 1000px;
width: 96%;
}
So you would have individual wrappers within each section of content (header, main, footer, etc.).
To use it with Skeleton it would look something like this (after a very brief look at their documentation).
HTML:
<div class="banner">
<div class="container"><!-- Your 960 grid -->
<div class="six columns><!-- Or however much of your 960 you want it to take up-->
<!-- Content -->
</div>
</div>
</div>