Предотвращает ли Blueprint 100% размер фона для изображений в CSS?

Я пытаюсь создать веб-сайт с правилом CSS background-size:100% 100%. Это изображение, которое находится за содержимым и спроектировано таким образом, что независимо от размеров окна браузера оно по-прежнему работает хорошо.

Я думаю, что правило, которое у меня есть (как показано ниже), каким-то образом противоречит Blueprint.

body { 
    background:url('../img/bg.jpg') no-repeat; 
    background-size:100% 100%; 
    -moz-background-size:100% 100%; 
    -webkit-background-size:100% 100%; 
}

Это должно создать идеальное 100% фоновое изображение, однако результаты, которые я получаю, заключаются в том, что фон заканчивается там, где заканчивается контент, независимо от размера окна браузера.

Вот два изображения того, что я хочу и что я получаю:

ОЖИДАЕТСЯ ожидаемое фоновое отображение

ЧТО Я ПОЛУЧАЮ (независимо от размера браузера) display I get

Пожалуйста, помогите мне, я не уверен, как поступить с этим.

Вот моя настройка HTML для страницы:

<body>
    <div class="container">
        <div id="navbar" class="span-6 last">
            <div id="logo" class="span-6 last"></div>
            <div id="menu">
                <ul>
                    <li class="menu-current"><a href="index.php">Home</a></li>
                    <li><a href="aboutus.php">About Us</a></li>
                    <li><a href="services.php">Services</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="content" class="span-18 last">

        </div>
    </div>
</body>

Если контейнер имеет высоту 550 пикселей, то фон заканчивается на 550 пикселей вниз по странице с пустым белым пространством под этой областью.

Мне удалось воспроизвести эффект на JSFiddle:

http://jsfiddle.net/danhanly/TurW5/4/


css blueprint-css
person Dan Hanly    schedule 18.05.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Было бы неплохо, если бы вы могли показать нам свой HTML и CSS таким образом, может быть, я смогу указать, что вы делаете неправильно.

Вы можете писать.

html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
    margin:20px auto;
    width:960px;
    overflow:hidden}
person breezy    schedule 18.05.2011
comment
Удалось воспроизвести эффект в JSFiddle, см. ссылку в моем посте. - person Dan Hanly; 19.05.2011
comment
В конечном счете, в сбросе css, который поставляется вместе с чертежом, отсутствовал html{height:100%}. Я добавил это. Ура! - person Dan Hanly; 19.05.2011

arrow_upward
0
arrow_downward

Добавление к телу значения min-height, равного высоте фонового изображения, гарантирует, что тело будет достаточно большим для отображения всего фона.

person Jrod    schedule 18.05.2011
comment
Удалось воспроизвести эффект в JSFiddle, см. ссылку в моем посте. - person Dan Hanly; 19.05.2011