Нижнее фиксированное изображение, как показано на прикрепленном скриншоте

Как показано на скриншоте ниже, я хотел бы разместить нижнее фиксированное изображение, которое должно появляться после (а не над) некоторым содержимым (логотипом и центральным текстом описания). Это изображение должно соответствовать ширине экрана.

Я придумал эти 2 неправильных решения. Во-первых, используя свойство CSS background-size:

// CSS
.bg {
    width: 600px;
    height: 300px;
    position: fixed;
    bottom: 0;
    left: 0%;
    background: url('image.jpg') no-repeat center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

// HTML part
<div class="bg"></div>

Во-вторых, используя немного Javascript и распознавая изменение размера окна и устанавливая некоторые свойства css для тега изображения:

// JS
        // some magick here...
        if ((win_w / win_h) < ($bg.width() / $bg.height())) {
          $bg.css({height: '100%', width: 'auto'});
        } else {
          $bg.css({width: '100%', height: 'auto'});
        }

// HTML Part (I'm using a shim)
<img class="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: relative; left: 0; bottom: 0" />

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

пример достижения


css background-image fixed
person Mich Dart    schedule 10.07.2013    source источник
comment
почему так сложно? Просто поместите изображение под текстовым описанием и над меню   -  person el Dude    schedule 11.07.2013
comment
Это изображение должно соответствовать высоте окна. Я не хочу прокручивать вниз. Если я изменяю размер окна просмотра, оно всегда должно фиксироваться в верхней части нижнего колонтитула и динамически регулировать его высоту.   -  person Mich Dart    schedule 11.07.2013
comment
Вы можете просто сделать max-width: 100%;, который сохранит размер изображения только таким же большим, как его контейнер (в данном случае область просмотра), и когда его ширина изменится, оно будет правильно масштабироваться и поддерживать соотношение сторон. Для IE вам понадобится специальная таблица стилей с width: 100%; или прокладка для max-width объявлений css. Дай мне знать, если это работает.   -  person Ilan Biala    schedule 11.07.2013

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, что-то вроде этого: http://jsfiddle.net/

Что я сделал:

  • Сначала я применил липкий нижний колонтитул: http://ryanfait.com/sticky-footer/.
  • Затем я добавил дополнительный div для фона (внутри оболочки содержимого, но в этом нет необходимости)
  • Я расположил фоновый элемент div абсолютно, с верхним значением, равным высоте содержимого над ним (логотип и другое содержимое, за которым не должен находиться фон), и нижним значением, равным высоте нижнего колонтитула. Слева и справа я установил 0, чтобы он занимал всю ширину.
  • Я применил background-size: contain, который вы уже поняли (в моем примере все еще требуется префикс)

CSS для фона выглядит так:

#background {
    background: url(...) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 30px; /* height of content above */
    bottom: 50px; /* height of content beneath */
    left: 0;
    right: 0;
    z-index: -1; /* to position it under the content, but as no content is covering it, you could leave it out as well */
}

Обычно я не большой поклонник добавления пустых div только для стилизации, но я не вижу здесь другого решения. Я еще меньше поклонник использования javascript для чего-то, что может испортить ваш сайт, если он не будет применен (изящная деградация и все такое), так что, вероятно, я бы пошел по этому пути...

person Pevara    schedule 10.07.2013
comment
Ух ты! Это именно то, что я искал. Большое спасибо. Сейчас я пытаюсь интегрировать его со Stellar.js для веб-сайта с вертикальным скольжением параллакса. Но это уже другая история ;) еще раз спасибо - person Mich Dart; 12.07.2013