CSS background - fixed cover - обрезается снизу

Question

Мне нужно вставить рамку как фиксед бакграунд страницы. Казалось бы что проще, вставь бакграунд, задай background-size: cover; и она растянется до нужных размеров. Но нет. Результат проще посмотреть тут:

https://formula-news.ru/prob/

И что странно, что когда смотришь с живого монитора - то нижней рамки нет. проверял на 1920х1080 и 1366х768.

Но если смотришь через инструменты разработчика - Toogle Device Toolbar - там все отлично, для всех разрешений.

.main_block {
  width: 100%;
  background: #000;
  height: 100vh;
  display: block;
}

.pre_border {
    padding: 15px 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    display: block;
    position: fixed;
    top:0;
    left: 0;
}


.full_border {
    background: url(https://i.ibb.co/R7JMV9W/border.png) no-repeat;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

  <div class="main_block">
      <div class="pre_border">
             <div class="full_border"></div>
      </div>
    </div>

Answer 1

Нужно изменить background-size: cover; на background-size: 100% 100%; для блока full_border.

cover --- Ключевое слово, обратное contain. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.

Ссылка на ресурс

Или вариант самому в графическом редакторе изменить размер рамки

Answer 2

Если вам так сильно нужен низ картинки, то можете добавить background-position: center bottom, тем самым картинка сохранит пропорции за счёт cover, но будет прижиматься нижней частью к нижней границе блока.

БЛОГ НА HUSL

CSS background - fixed cover - обрезается снизу

Ответы (2 шт):