CSS фоновое изображение: внизу страницы

На моем сайте, у меня есть 3 фоновых изображений, примененных к body элементу (чтобы создать впечатление верхних, левые и нижних границ), как так:CSS фоновое изображение: внизу страницы

body { 
    background: url('../image/body-x.gif') repeat-x 0 0, 
       url('../image/body-x.gif') repeat-x 0 100%, 
       url('../image/body-y.gif') repeat-y -280px 0; 
    background-color: #47b48e; 
}

Это показывает штраф большую часть времени, поскольку страницы довольно длинные. Но на более короткие страницы - такие, как 404 шаблона http://www.mattpealing.co.uk/asdfadsf - body-x.gif не прилипает к нижней части страницы, например, так:

enter image description here

Я попытался добавить следующий код (я прочитал многочисленные в прошлом это было распространенным решением):

html, body { 
    height: 100%; 
}

Но я никогда не смогу это получить. Он по-прежнему не отображается внизу, и вместо этого он разбивает его на других страницах. Такие, как на странице О, нижняя граница изображения перекрывает копию тела, как в этом Screengrab:

enter image description here

Может кто-нибудь увидеть, что я делаю неправильно?

источник

2014-12-29 pealo86

похоже, что фоновое изображение имеет сплошной цвет, так почему бы не фонового цвета –

Try:

html, body { min-height: 100% }

От: Make <body> fill entire screen?

Как и в сторону, что, если вы использовали белую верхнюю и нижнюю границу на корпусе и используется только фоновое изображение для левого белого пространства? Это упростит код и сократит пару ненужных HTTP-запросов.

источник

2014-12-29 18:33:18 Darren

спасибо! Кажется, это работает хорошо. Также я даже не думал о том, чтобы установить верх и низ в качестве границ! Я сделал это, но теперь, как ни странно, я вернулся с оригинальной проблемой на макете страницы 404 ... казалось, что она отлично работает с изображениями, хотя и свойство 'min-height'! – pealo86

CSS фоновое изображение: внизу страницы

ответ

Смежные вопросы