Расширить фон до нижней части страницы, прокручивать или нет

Question

Расширить фон до нижней части страницы, прокручивать или нет

0

Мне нужно, чтобы фон расширялся до нижней части страницы, и он должен работать как с короткими, так и с длинными страницами.

<html>
   <body>
      <div id="container">Container of variable height</div>
   </body>
</html>

CSS

body {
    background: url("background.jpg");
}
#container {
   margin: auto;
   width: 800px;
}

Это общая структура. Фон отлично работает на длинных страницах со свитком, но на коротких страницах он отключается прямо под # контейнером.

Если я добавлю

html, body {
   height: 100%;
}

Это будет делать снизу на коротких страницах, но если вы пролистаете длинные страницы, фон срезается посередине.

Я попытался использовать

html, body {
   min-height: 100%;
}

Но он просто игнорируется всеми браузерами

Что я могу сделать для фоновой работы как на длинных, так и на коротких страницах? Благодарю!

skyisred 20 март 2014, в 09:06

Источник

Теги:

html

css

css3

2 ответа

Ещё вопросы

tys · Answer 1 · 2014-03-20T06-22-00.000Z

Вы можете играть с различными свойствами css для фонового размера. например, при условии, что размер фонового изображения довольно большой и не требует разбиения:

body {
    background: url("background.jpg");
    background-size: cover;
}

Определенно самый простой способ. Я часто заканчиваю тем, что получаю что-то вроде {background: url('background.jpg') no-repeat center center; background-size: cover} .
Нет, это не помогает. Бирка тела все еще обрезается прямо под контейнером.

Mohammad Reza Saberi · Answer 2 · 2014-03-20T05-44-00.000Z

иСПОЛЬЗОВАТЬ:

body {
  background-image:url('background.jpg');
  background-repeat:repeat-y;
}