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

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

2 голосов
/ 18 мая 2011

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

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

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

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

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

ОЖИДАЕМЫЙ expected background display

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

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

Вот мои настройки 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>

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

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

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

Ответы [ 2 ]

2 голосов
/ 19 мая 2011

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

0 голосов
/ 18 мая 2011

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

...