Перепутал абсолютно позиционированное изображение на моей странице

Question

На этом сайте у меня BG с автоматическим изменением размера, но я хотел установить фиксированную черную полосу внизу страницы.

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

Я пробовал несколько вещей, но не могу найти решение этой проблемы.У кого-нибудь есть идеи, как мне поступить?(Может быть, мне не хватает одной мелочи, или, может быть, мне нужно начать все заново, в любом случае, пожалуйста, помогите!)

Примечание: фон автоматического размера находится в теге html, а черная нижняя панель - в своем собственномотдельный тег div "#black_bottom"

http://graves -incorporated.com / test_sites / gm_2012 /

Answer 1

Просто удалите height:100% из #black_bottom, сделайте absolute:position div height auto.

Answer 2

Я верю, что все упаковано неправильно. Почему ваш <div id="black_bottom> содержит все, от вашей оболочки до <div id="footer_wrap">?

Answer 3

Хорошо, так что я думаю, что я вижу, что вы собираетесь сейчас. Если мое понимание верно, вы хотите, чтобы градиентный фон расширялся примерно на 70-73 пикселя над нижним краем вашего поля содержимого, где он встречает сплошную серую полосу, которая простирается до нижней части окна, или чуть ниже этой нижней круглой G эмблема, в зависимости от того, что ниже. Я сделал это, полностью удалив элемент #black_bottom , установив сплошной серый цвет фона для элемента html, соответствующий цвету вашей нижней гистограммы, и применил круговой градиентный фон к body элемент. Я также удалил явно определенную высоту из #wrapper и присвоил ей отрицательный margin-bottom, чтобы позволить черной полосе перекрывать ее. Стили, которые я заменил, перечислены ниже. Надеюсь, это ближе к тому, что вы ищете:

html {
    background: #333;
}

body {
    background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

#wrapper {
    width: 960px;
    margin: 0 auto -136px;
    top: 20px;
    position: relative;
}