Я создал корреляцию между размером содержимого и размером фона. Почему?

Привет, ребята Я создаю веб-сайт для занятий. Я просто добавил небольшой линейный градиент, чтобы смешать фоновое изображение с фоновым цветом. Фон определен в :root, поэтому я использовал :root:before, чтобы добавить градиент. На странице с достаточным количеством контента все работает нормально. Но на страницах с меньшим количеством контента фоновое изображение маленькое и растет с количеством контента. Я понятия не имею, почему.

СКСС

:root {
   background: $background-color;
   /*Absolut verlinktes Bild*/
   background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
   background-repeat: no-repeat;
   background-size: contain;

   box-sizing: border-box;
   font-size: 1.1rem;
   font-family: Montserrat, sans-serif;
   scroll-behavior: smooth;
}
:root:before {
   content: "";
   position: absolute;
   bottom: -15%;
   width: 100%;
   height: 100px;
   background: linear-gradient(to top, $background-color, transparent);
}


html css sass
person Akorian    schedule 06.09.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Виновник не background-image, а сам root. Поскольку внутри него нет содержимого, а ширина и высота по умолчанию для root увеличиваются вместе с содержимым внутри него. Вы можете сделать следующее:

:root {
   min-width: 100vw;
   min-height: 100vh; 
   background: $background-color;
   /*Absolut verlinktes Bild*/
   background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
   background-repeat: no-repeat;
   background-size: contain;

   box-sizing: border-box;
   font-size: 1.1rem;
   font-family: Montserrat, sans-serif;
   scroll-behavior: smooth;
}
:root:before {
   content: "";
   position: absolute;
   bottom: -15%;
   width: 100%;
   height: 100px;
   background: linear-gradient(to top, $background-color, transparent);
}

person Sapinder Singh    schedule 07.09.2020
comment
Ваша помощь приблизила меня к месту назначения! спасибо - person Akorian; 07.09.2020

arrow_upward
0
arrow_downward

С помощью Sapinder я разработал это решение. Использование min-width и min-height — чертовски хорошая идея. Но так как полоса прокрутки должна быть вычтена из минимальной ширины для работы, чтобы предотвратить переполнение x, мне пришлось создать небольшое вычисление внутри переменной. Кроме того, мне пришлось изменить размер фона с содержимого на 100%, чтобы всегда заполнять весь фон. Я не знаю, лучший ли это или самый элегантный способ стилизации фона, но он работает (за исключением градиента, но это не было частью вопроса). Новый SCSS:

$background-color: #344451;
$scrollbar-width: 5px; /*Only use a variable for this sure to accessibility of the number*/
$background-min-width: calc(100vw-$scrollbar-width); /*Substract the width of the scrollbar from the minimal background width.*/

:root {
   min-width: $background-min-width;
   min-height: 100vh;
   background: $background-color;
   /*Absolut verlinktes Bild*/
   background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
   background-repeat: no-repeat;
   background-size: 100%;

   box-sizing: border-box;
   font-size: 1.1rem;
   font-family: Montserrat, sans-serif;
   scroll-behavior: smooth;
}
:root:before {
   content: "";
   position: absolute;
   bottom: -15%;
   width: 100%;
   height: 100px;
   background: linear-gradient(to top, $background-color, transparent);
}
person Akorian    schedule 07.09.2020