Как сделать фоновое изображение шире, чем область контента сайта (без полос прокрутки)

Question

Мне дали дизайн для сайта, и я пытаюсь его реализовать.

Одна проблема, с которой я столкнулся, заключается в том, что дизайн имеет несколько фоновых изображений (одно для верхнего колонтитула, одно для основного текста и одно для нижнего колонтитула сайта), которые шире, чем основная область контента сайта.

Простое размещение их в качестве фоновых изображений не работает, поскольку расширение разделителей верхнего и нижнего колонтитула, достаточное для размещения фона, приводит к появлению горизонтальных полос прокрутки, если окно браузера недостаточно велико, чтобы полностью отобразить фон.

Это нежелательно, поскольку фоны не очень важны для просмотра веб-сайта, и я не хочу, чтобы для них появлялись полосы прокрутки (полосы прокрутки должны появляться только в том случае, если браузер слишком мал, чтобы полностью отобразить содержимое сайта).

Второй метод состоит в том, чтобы иметь отдельный, абсолютно позиционированный div для отображения фонового изображения заголовка (и поместить его под элемент с размером окна браузера), и установить его ширину равной 100%, чтобы он никогда не превышал размер окно браузера (и, следовательно, создать полосы прокрутки).

Это работает до некоторой степени - однако, когда окно слишком маленькое, фон начинает смещаться относительно контента, так как позиция «верхнего центра» фона относительно окна браузера , а не область содержимого . При больших размерах они фактически одинаковы, поскольку область содержимого центрирована, но при небольших размерах отображается только часть содержимого, поэтому центр содержимого и центр окна браузера отличаются.

Хорошей иллюстрацией этой проблемы, которую я обнаружил, является веб-сайт Quicken: http://quicken.intuit.com/. При больших размерах фон облаков выглядит хорошо, но если вы сделаете ширину своего окна достаточно маленькой, облака начнут смещаться относительно к содержанию (плохо!).

Любые идеи о том, как это исправить, чтобы фоновые изображения

1. не создавать полосы прокрутки, так как они не являются частью содержимого сайта
2. фиксированы относительно содержимого сайта (и не меняются при небольших размерах окна браузера)

Идеальным решением было бы что-то вроде превращения переполнения в скрытое на теле, но только для указанных div. К сожалению, я считаю, что это невозможно.

Я бы предпочел чисто html / css решение, но я согласен, что мне может понадобиться js, чтобы получить желаемый эффект.

Спасибо! (это сложный вопрос, поэтому, если требуется какое-либо разъяснение, дайте мне знать)

ОБНОВЛЕНИЕ: Исправлено это путем установки минимальной ширины на фоне div к ширине содержимого.

Answer 1

Установите минимальную ширину элемента div, содержащего фоновое изображение, равным ширине содержимого.

Answer 2

Вы должны иметь ширину 100% для верхнего и нижнего колонтитула. И поместите изображение как фоновое изображение в эти элементы ... центрируйте его горизонтально.

Внутри определенных div'ов есть обертка по центру. и это ширина содержимого их дел.

Вот так.

HTML

<div id="header">
    <div class="wrapper">
        ...
    </div>
</div>
<div id="content">
    <div class="wrapper">
        ...
    </div>
</div>
<div id="footer">
    <div class="wrapper">
        ...
    </div>
</div>

CSS

div#header {
    background: url(...) 50% 0; /* to center your background image horizontally */
    }

div#content {
    background: url(...) 50% 0; /* to center your background image horizontally */
    }

div#footer {
    background: url(...) 50% 0; /* to center your background image horizontally */
    }

div.wrapper {
    margin: 0 auto; /* to center the div horizontally */
    width: 960px; /* or however wide it should be */
    }

Надеюсь, это поможет.

Answer 3

У меня была та же проблема на сайте, над которым я работал, и я нашел следующее решение, которое хорошо работает, если все ваши фоновые изображения имеют одинаковую ширину.

/* 
A container div that is set to the 100% width, with the overflow set to hidden. 
This hides the overflowing images if the window sizes is too small 
*/

#bg_container {
    position:absolute;
    z-index:0;
    top:0px;
    width:100%;
    overflow:hidden;
}

/* 
A div that sets the size of the content and centers itself on the page. 
*/

.bg {
    margin:0 auto;
    width:1000px;  /* content size */
    overflow:visible;
}

/* 
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px. 
*/

.bg img {
    margin-left:-250px;
}

Answer 4

Вы можете использовать свойство overflow и установить его скрытым в div, что приведет к появлению полос прокрутки.

Answer 5

Я что-то упустил, или вы используете CSS background-image свойство?

Я взглянул на сайт Quicken, и, если честно, фоновое изображение облака, изменяющееся при изменении размера браузера, не должно волновать, если ваше фоновое изображение не будет более отличительным, чем группа облаков.

Видишь, что я имею в виду?