Прикрепить второе фоновое изображение к низу страницы

[Lang]

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

body { padding:0; margin:0; background: url('images/bg_main3.jpg') top repeat-x, url('images/bg_main2.jpg') repeat-x bottom ;}

но нижнее изображение располагается внизу экрана, а не внизу страницы и если страницу прокрутить вниз то оно останется на месте

Если добавить параметр fixed оно будет перемещать вместе с экраном, а хотелось что бы оно было всегда внизу страницы и его было видно только когда пролистаешь в самый низ

[AlexZaw]

 

4 часа назад, Lang сказал:

Если добавить параметр fixed оно будет перемещать вместе с экраном,

Если добавить fixed, то как раз наоборот оно будет зафиксировано на месте. Ваш код, кстати, прекрсано работает так как вам нужно, значит ошибка где-то в другом месте

[Lang]

14 часов назад, AlexZaw сказал:

 

Если добавить fixed, то как раз наоборот оно будет зафиксировано на месте. Ваш код, кстати, прекрсано работает так как вам нужно, значит ошибка где-то в другом месте

Я просто совсем профан в этой области, а где смотреть тогда?

[AlexZaw]

В 16.09.2018 в 15:58, Lang сказал:

а где смотреть тогда?

Покажите код с ошибкой, тогда можно будет сказать что у вас не так. Или дайте ссылку на сайт

[Lang]

убрал

Edited September 17, 2018 by Lang

[AlexZaw]

Хоть бы под спойлер убрали.. Но не суть, я имел ввиду код на котором можно воспроизвести ситуацию. На одном css этого не сделать. Выложите код в песочницу (https://jsfiddle.net или https://codepen.io) или дайте ссылку на сайт.

[Lang]

https://langooy.ru/

прошу прощения, убрал код, вот ссылка

[AlexZaw]

Уберите height:100% из стилей html,body

[Lang]

Я так побывал, но тогда на страницах где контента меньше, футер будет по средине страницы. А какого то иного пути нету?

[AlexZaw]

Вы маленько не так поняли, ну или я не так выразился. Я имел ввиду селектор html, body  т.е.  у body высоту в 100% можно задать, тогда футер прижмется к низу. А вот у html ее нужно убрать.

[SelenIT]

16 часов назад, AlexZaw сказал:

у html ее нужно убрать

Не нужно. Без этого body не поймет, от чего отсчитывать свои 100%, и футер не прижмется.

Можно, конечно, вместо этого задать body height: 100vh вместо 100%, тогда стили html влиять не будут. Только в очень-очень старых браузрах футер не прижмется — но так тем браузерам и надо:)

[Lang]

Попробовал варианты

    html { width:100%; height: 100% }
    body { width:100%; height: 100vh }
    body { padding:0; margin:0; background: url('images/bg_main3.jpg') top repeat-x, url('images/bg_main3.jpg') repeat-x bottom ;}

и так

    html { width:100%; height: 100% }
    body { width:100%; }
    body { padding:0; margin:0; background: url('images/bg_main3.jpg') top repeat-x, url('images/bg_main3.jpg') repeat-x bottom ;}

в обоих случаях нижняя картинка фона размещается просто внизу экрана

[AlexZaw]

2 часа назад, SelenIT сказал:

Не нужно. Без этого body не поймет, от чего отсчитывать свои 100%, и футер не прижмется.

Как ни странно понимает. Я сам не понимаю почему, но работает.

 

40 минут назад, Lang сказал:

в обоих случаях нижняя картинка фона размещается просто внизу экрана

У html вообще не задавать высоту, для body задать высоту 100%

[Lang]

2 часа назад, AlexZaw сказал:

У html вообще не задавать высоту, для body задать высоту 100%

У меня не прижимает, уже как то не удобно за стока мучений

html { width:100%; }
    body { width:100%; height: 100% }
    body { padding:0; margin:0; background: url('images/bg_main3.jpg') top repeat-x, url('images/bg_main3.jpg') repeat-x bottom ;}

http://prntscr.com/kvwpel

 

и вот все равно(

[SelenIT]

4 часа назад, AlexZaw сказал:

но работает

В каком браузере? Только что проверил в Fx62, Chr69. Edge17 — везде фон желтый, высота body без контента нулевая.

Если фон body, при отсутствии явного фона для html, применяется ко всему окну — это другая особенность (см. 4-й абзац спеки). Это не значит, что сам body растянулся.

[AlexZaw]

<div class="wrapper">  
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>

*{
  margin: 0;
}
html,body{
  height: 100%;
}
body{
  background: url('http://placekitten.com/50') top repeat-x, url('http://placekitten.com/50') repeat-x bottom;
}
.wrapper{
  position: relative;
  min-height: 100%;
}
.footer{
  position: absolute;
  bottom: 0;
}

 

[AlexZaw]

11 часов назад, SelenIT сказал:

В каком браузере?

Ошибочка вышла, оказывается где-то не убрал стили, поэтому все работало, так как повторить такой фокус не удалось ?

А я всю голову сломал почему оно работало ?