Я получил этот код 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. Как я могу получить фоновое изображение для отображения полной страницы?

< Сильный > UPDATE

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

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

#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 я могу заставить фоновое изображение занимать почти всю страницу, кроме того, что слева все еще остается черное пространство. Кроме того, этот случай вызвал увеличение изображения, поэтому даже при том, что оно занимает требуемое пространство, изображение теперь увеличено до одной части изображения.

0
feners 29 Фев 2020 в 18:43

2 ответа

Лучший ответ

Пожалуйста, попробуйте добавить ниже 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; 
}
0
KKGupta 12 Мар 2020 в 16:20

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

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

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

0
Brandon 29 Фев 2020 в 17:50