Размер фона - обложка

0

Я пытаюсь растянуть изображение на весь экран (обложка): http://www.bootply.com/114850

У меня есть простое Меню и кнопка вызова к действию, но изображение охватывает только меню и останавливается там.

Стиль раздела ниже.

.section-1 {
  min-height: 100%;
  background-image: url(http://i.imgur.com/fGrTemz.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: auto;
}

Что мне не хватает?

Теги:
background-image

6 ответов

1
Лучший ответ

Добавить

html, body {
    height:100%;
}

раздел-1 растягивается до высоты его родительского (html/body), который не имеет высоты, установленной, поэтому он не знает, какая высота должна быть.

  • 0
    Пробовал это, но он все еще остается только на Navbar. Вы можете проверить это на Bootply, который я поставил.
  • 0
    Ты уверен? Я просто попробовал еще раз, и это работает для меня? Я попробовал это на Bootply ... Я посмотрю, смогу ли я отправить вам скриншот.
Показать ещё 3 комментария
1

Измените минимальную высоту в процентах на пиксели.

.section-1{
    min-height:500px;
}
  • 0
    Сработало, но почему не работает со 100%?
1

Процентная высота зависит от высоты родителя, поэтому вам нужно "пропустить" высоту в процентах к целевому элементу.

html, body {
    height: 100%;
}

Демо: http://www.bootply.com/114867

0

если вы добавите width: auto; к классу разделов. затем просто поиграйте с min-height класса секций 1 в "px", чтобы настроить размер экрана, который вам больше всего подходит. в основном, вы можете использовать медиа-запросы для разных размеров экрана таким образом, чтобы вы всегда получали идеальный размер. но это много работы, поэтому используйте

html, body{height: 100%;}
0

Yo указанная position:absolute в вашем .content-holder Чтобы она была удалена из потока содержимого. В результате его контейнер <section> уменьшает его высоту, чтобы соответствовать только элементу <nav>.

Попробуйте удалить position:absolute от .content-holder. И если вы добавите position:absolute значение. .section-1, фон будет полноэкранным.

0

Добавьте к вам следующее: css:

position: Absolute

поэтому ваш css будет

.section-1 {
  min-height: 100%;
  position: absolute;
  background-image: url(http://i.imgur.com/fGrTemz.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: auto;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню