How to make "image banner" 100% of viewport with no margins, and rest of page center

Question

My question is how to get a banner to be 100% of the viewport whilst keeping everything else center.

Right now I am trying to experiment with the Skeleton framework for the use of its pre made @media solutions and grid system. I noticed because it is a 960 grid system I can't put a banner inside it which will go to 100% of the viewport ( as its restricted to 960px ).

I would like a solution which allows me to continue using the Skeleton framework and I can get a work around for a 100% viewport banner like this site as an example.

If this is not possible then I will need guidance for the best method of pulling this off.

Answer 1

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>