Проблема с получением фонового изображения для отображения полной страницы с помощью Squarespace

Я получил этот код CSS для отображения полной страницы фонового изображения на веб-сайте Squarespace, над которым я работаю:

#collection-5de6d28545f1a7075b7a2741 #canvas{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Однако на главной домашней странице сайта фоновое изображение застряло в верхней части страницы. Изображение достаточно большое, чтобы его можно было растянуть на всю страницу. В предварительном просмотре, который вы получаете при использовании редактора Squarespace, код, кажется, выполняет свою задачу, но как только вы на самом деле переходите на страницу, он не работает, потому что большую часть экрана занимает черное пространство. Чтобы просмотреть проблему, вы можете перейти на https://www.richiequake.com/ и использовать пароль Help123. чтобы просмотреть его. Поскольку я не очень хорошо знаком с тем, как Squarespace структурирует HTML-код для вас, я не знаю, связана ли проблема с моим CSS или каким-то элементом HTML. Как я могу заставить фоновое изображение отображать всю страницу?

ОБНОВЛЕНИЕ

Используя предложение Брэндона, мне удается заставить изображение занимать страницу сверху вниз, однако по ширине с обеих сторон изображения все еще остаются черные пробелы.

Сейчас я использую:

#collection-5de6d28545f1a7075b7a2741 #canvas{
  background-position: center top !important;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 11px);
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)
}

С помощью этого CSS я могу заставить фоновое изображение занимать почти всю страницу, за исключением того, что слева остается черное пространство. Кроме того, этот случай привел к увеличению изображения, поэтому, даже если оно занимает нужное мне пространство, изображение теперь увеличивается до одной части изображения.


html css background-image squarespace
person feners    schedule 29.02.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте добавить ниже css на существующий веб-сайт css для холста.

#collection-5de6d28545f1a7075b7a2741 #canvas {
    width: 100%;
    height: 100%;
    min-height: calc(89vh);
    background: url(https://static1.squarespace.com/static/5cff45a…/t/5dc6fce…/1573321963518/richie_+5.jpeg);
    box-sizing: border-box;
    margin: 0;
    max-width: none; 
}
person KKGupta    schedule 12.03.2020
comment
Спасибо за помощь. Я попробовал ваше предложение, и теперь у меня появляется черное пространство внизу экрана. Также кажется, что изображение все еще увеличивается. Я обновил страницу, чтобы использовать ваш код, если вы хотите проверить, что я получаю сейчас. - person feners; 12.03.2020
comment
попробуйте добавить ниже css вверху файла css html,body{ width:100%; высота:100%; } - person KKGupta; 12.03.2020
comment
Почти готово! Есть ли способ полностью отобразить все изображение? Сейчас он увеличен, и изображение не отображается целиком. - person feners; 12.03.2020
comment
вы должны использовать изображение большего размера, а ширина изображения должна быть больше высоты в вашем случае. - person KKGupta; 13.03.2020
comment
Хм, изображение 1413x1413, поэтому я подумал, что это сработает. Изображение должно быть выше этого? - person feners; 13.03.2020
comment
вместо того, чтобы использовать изображение одинаковой ширины и высоты, попробуйте использовать изображение с шириной, превышающей высоту. Это может помочь вам установить наиболее полное изображение на экране. Хотя при работе с фоном всегда следует учитывать, что часть изображения может обрезаться с концов в зависимости от положения фона. - person KKGupta; 17.03.2020

arrow_upward
0
arrow_downward

Как упоминалось здесь, вы можете исправить проблему, используя следующий CSS:

#collection-5de6d28545f1a7075b7a2741 #canvas {
  min-height: calc(100vh - 11px);
}

Смотрите связанный ответ для объяснения того, как это работает.

person Brandon    schedule 29.02.2020
comment
Да, я понимаю, почему я должен это делать, но даже с этой строкой кода я изо всех сил пытаюсь найти правильные значения, которые мне нужны, чтобы фоновое изображение занимало всю страницу. Прямо сейчас, используя ваш ответ, фоновое изображение не занимает всю страницу, и я не могу найти, что мне следует изменить с отступом, чтобы изображение отображалось полностью. - person feners; 05.03.2020