Я пытаюсь растянуть изображение на весь экран (обложка): 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;
}
Что мне не хватает?
Добавить
html, body {
height:100%;
}
раздел-1 растягивается до высоты его родительского (html/body), который не имеет высоты, установленной, поэтому он не знает, какая высота должна быть.
Измените минимальную высоту в процентах на пиксели.
.section-1{
min-height:500px;
}
Процентная высота зависит от высоты родителя, поэтому вам нужно "пропустить" высоту в процентах к целевому элементу.
html, body {
height: 100%;
}
если вы добавите width: auto; к классу разделов. затем просто поиграйте с min-height класса секций 1 в "px", чтобы настроить размер экрана, который вам больше всего подходит. в основном, вы можете использовать медиа-запросы для разных размеров экрана таким образом, чтобы вы всегда получали идеальный размер. но это много работы, поэтому используйте
html, body{height: 100%;}
Yo указанная position:absolute
в вашем .content-holder
Чтобы она была удалена из потока содержимого. В результате его контейнер <section>
уменьшает его высоту, чтобы соответствовать только элементу <nav>
.
Попробуйте удалить position:absolute
от .content-holder
. И если вы добавите position:absolute
значение. .section-1
, фон будет полноэкранным.
Добавьте к вам следующее: 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;
}