Хранение фонового изображения внизу - PullRequest
Новая
       0

Хранение фонового изображения внизу

7 голосов
/ 21 марта 2011


Я работал над решением для хранения изображений на нижней странице.Код, который я получил в настоящее время: 

.footer {
    background-image: url('images/footer.png');
    background-repeat: repeat-x;
    position: absolute;
    height: 950px;
    width: 100%;
    z-index: -101;
    bottom: 0;
}

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

.background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 600px;
    background-image: url('images/sky.png');
    background-position: center;
    background-repeat: repeat-x;
    z-index: -100;
}

Обратите внимание: первая часть не работает (этоне внизу), но во второй части (вверху).
Если вы хотите посетить сайт, не стесняйтесь: www.duffydesigns.co.uk/brough (Пожалуйста, не выносите суждения,это незавершенная работа, ничего по-настоящему не закончено!).
Спасибо за помощь,
Джозеф Даффи
Примечание: как я уверен, вы можете понять, верхняя часть - это небо, нижняя -это трава и деревья.

Ответы [ 5 ]

16 голосов
/ 21 марта 2011

background-position принимает два аргумента, x-значение и y-значение, поэтому, чтобы расположить его снизу, вы должны использовать: background-position: center bottom;.Вы можете использовать это, чтобы исправить свой первый пример.

Есть ли причина, по которой вы не можете поместить фон в качестве фона тега body или html?Я не думаю, что это официально разрешено за тегом html, но я никогда не видел браузер, где он не работает (пока что нет ...).

1 голос
/ 22 марта 2011

Если вы хотите, чтобы он постоянно отображался в самом низу (на странице, а не в окне), используйте что-то вроде этого, вставьте его в HTML-файл, чтобы увидеть, как оно работает, измените высоту .test на покажите, что оно останется в нижней части экрана, когда окно не прокручивается, но, если это произойдет, пойдет дальше вниз. 

<html>
<head>
<style type="text/css">
    html, body{
        height:100%;
        margin:0;
        }
    #content{
        min-height:100%;
        position:relative;
        }
    #footer{
        background:green;
        width:100%;
        height:150px;
        margin-top:-150px;
        display:block;
        }
    .test{
        background:blue; 
        width:400px; 
        height:2000px; 
        opacity:.7; 
        color:#fff; 
        padding:20px;
        }
</style>
</head>
<body>
<div id="content">
    <h1>This is a page.</h1>
    <div class="test">this shows that things appear in front of the bg</div>
</div>
<div id="footer"></div>
</body>
</html>
1 голос
/ 21 марта 2011

Сделайте это 

<div class="background"></div>

.background {
    width:100%;
    height:90px;
    background:transparent url(...) repeat-x 0 0;
    position:fixed;
    bottom:0;

}

Проверьте рабочий пример на http://jsfiddle.net/YGXxT/

1 голос
/ 21 марта 2011

Если вы хотите, чтобы фоновое изображение появилось внизу страницы, вы можете использовать: 

body {
    background-image: url(...);
    background-position: center bottom;
    background-repeat: no-repeat;
}
0 голосов
/ 21 марта 2011

Добавьте min-height: 100% вместо height: 950px, что даст вашему div необходимую высоту.Во-вторых, используйте position:fixed, чтобы заблокировать фоновое изображение в том же месте (для прокрутки).

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

Нет похожих вопросов

...