Информация: у меня есть обрезанное изображение, используемое в качестве фонового изображения для верхней части моей веб-страницы. В CSS я определил в px размер div, содержащего изображение, которое обрезает изображение. (Я делаю это в Squarespace). Поэтому, когда вы входите на страницу, вы видите фоновое изображение (и некоторый текст), заполняющее экран, а затем прокручиваете изображение ниже.
Проблема: когда я уменьшаю размер окна веб-браузера, div, конечно, поддерживает ту же высоту px. Это означает, что изображение оказывается фоновым для большей части страницы - я просто хочу, чтобы оно было вверху при входе на страницу.
Вопрос: как мне сделать div обрезки по высоте? Насколько я исследовал, я могу установить только значение в px, которое не отвечает требованиям ... Следующий код основан на размере моего внешнего экрана. Поэтому мне нужна эта высота px для больших экранов.
Мой код:
.header-background {
position: absolute;
top: -160px;
left: -335px;
right: -335px;
height: 850px;
z-index: -1;
overflow: hidden;
background-size: cover;
background-position: center;
background-image: img src('/s/Sams-sort.png')