Как сделать "изображение баннера" в 100% области просмотра без полей, а остальное в центре страницы

Question

У меня вопрос, как сделать так, чтобы баннер был 100% из области просмотра, сохраняя все остальное в центре.

Прямо сейчас я пытаюсь поэкспериментировать с каркасом Skeleton для использования его предварительно сделанного @media решения и сетка. Я заметил, потому что это система сетки 960. Я не могу разместить внутри нее баннер, который будет 100% окна просмотра (так как его ограничено 960px).

Мне бы хотелось решение, которое позволило бы мне продолжать использовать каркас Skeleton, и я могу обойти 100% Баннер вида на порталы, как этот сайт в качестве примера.

Если это невозможно, тогда мне понадобится руководство для лучшего способа справиться с этим.

Answer 1

Если я правильно понимаю ваш вопрос, это обычно делается с помощью обертки внутри баннера.

Пример:

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%;
 }

Таким образом, у вас будут отдельные оболочки в каждом разделе контента (верхний, главный, нижний колонтитулы и т. Д.).

Если использовать его со Skeleton, это будет выглядеть примерно так (после очень краткого ознакомления с их документацией).

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>