установить фон на половине элемента

Question

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

Я хочу, чтобы мой фон начинался только с середины кадра.

Ниже мой кодустановить фон:

#video_player {
    background-image: url("http://94.23.46.98/img/bg-f.jpeg");
    background-size: 100% auto;
}

и полный код страницы: http://jsfiddle.net/u4hpezon/

Answer 1

Итак, для того, что вы пытаетесь достичь, нужно больше div.Ниже приведен рабочий пример.

C'est parti

1. Создание и стилизация контейнера.

   Мы создаем container с использованием div.Контейнер должен занимать всю страницу, поэтому давайте сделаем:

   min-height: 100vh;
   min-width: 100vw;
   

   , чтобы он соответствовал странице.Затем мы хотим позиционировать container, потому что позже мы будем использовать позиционирование absolute.

2. Создайте div для хранения вашего контента (текст,изображение, что угодно ...)

   Это наш .text-container div.Это div будет в качестве контейнера для вашего контента.Затем сделайте так, чтобы div заполнял всю страницу:

   width: 100vw;
   height: 100vh;
   

   , и после этого давайте разместим внутреннюю часть div, img, whatever:

   display: flex;
   justify-content: center;
   align-items: center;
   

   См. Полное руководство по flexbox

3. Создайте div для хранения фона

   Это наш .background div.Мы хотим, чтобы этот div соответствовал только половине роста родителя.Это работа height: 50vh; После этого div необходимо позиционировать.

   Итак, давайте сделаем это:

   position: absolute;
   bottom: 0;
   

4. Заказ слоев

   У вас могут возникнуть проблемы с заказомэлементы.Давайте предварительно исправим это, на всякий случай, используя некоторые z-index: -1;, чтобы убедиться, что фон остается на заднем плане.

body,
div {
  margin: 0;
  box-sizing: border-box
}

.container {
  position: relative;
  min-height: 100vh;
  min-width: 100vw;
  text-align: center;
}

.background {
  background: teal;
  height: 50vh;
  min-width: 100vw;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.text-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  background: orange;
  padding: 0 15px;
}

<div class="container">
  <div class="text-container">
    <div class="text">
      <h1>Text!</h1>
    </div>
  </div>
  <div class="background">

  </div>
</div>

Надеюсь, это помогло!