фоновое изображение должно быть прикреплено вниз - PullRequest
5 голосов
/ 19 мая 2011

Я пытаюсь выдвинуть фоновое изображение и прикрепить его к нижней части моей страницы. Изображение НЕ является нижним колонтитулом, поскольку оно будет скрыто за некоторым содержимым. Но изображение не должно обрезаться сверху, когда контента мало, и должно прилипать к низу, когда контента много!

Пока ничего не работает. Кто-нибудь получил какие-нибудь советы для меня?

Вот два примера. Один с контентом, подходящим к окну, а другой с гораздо большим содержанием.

Вот две ссылки;

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test.html

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test2.html

Заранее спасибо, ребята!

Ответы [ 4 ]

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

Я бы поместил изображение в качестве фона для body, используя background-attachment: fixed; и добавив:

html, body {
  height: 100%;
}

Таким образом, общая сумма будет:

html, body {
  height: 100%;
}
body {
  background-image: url("images/bg_content.gif");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
0 голосов
/ 11 апреля 2014

Липкий нижний колонтитул и липкий фон в одном. Возьмите высоту вашего фонового изображения в качестве высоты нижнего колонтитула и определите, какая часть изображения должна перекрываться вашим контентом. Чтобы липкий нижний колонтитул «исчез», используйте тот же номер в главном поле-поле, что и для высоты нижнего колонтитула. Это модерируемый дизайн от оригинального дизайна липкого нижнего колонтитула от: http://www.webcreationz.nl/de-ultieme-sticky-footer-code (извините, сайт на голландском языке).

Я только что понял это. Надеюсь, это кому-нибудь поможет.

HTML:

<div id="container">

  <div id="main">text of your website</div>

  <div id="spacer"></div>

</div>

<div id="footer"></div>

CSS:

html, body { 
    height: 100%; 
}


#container {
width: auto; /* with number center with margin: 0 auto;*/
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -175px; /* height footer */
}

#main {
    height: auto;
    width: 618px;
    float: right;
    margin-top: 10px;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #E1E4EC;
    margin-bottom: -100px; /* overlap of 100 px into footer */

}

#spacer {
    display: block !important;
    height: 175px; /* height footer */
}

#footer {
    clear: both;
    height: 175px; /* height footer */
    width: auto; /* with number center with margin: 0 auto;*/
    background-image: url("images/plaatje jpg"; /* background picture */
    background-repeat: no-repeat;
    background-position: center bottom;
}
0 голосов
/ 19 мая 2011

Я считаю, что ваша проблема в два раза. Во-первых, у вас есть установленная высота для вашего # content-image div. Уберите эту высоту.

Во-вторых, поскольку ваш контент в этом div-объекте перемещается, вам нужно очистить его в # content-image div. что-то вроде: «переполнение: скрытое; очистить: оба»

Попробуйте это.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...