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

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

0 голосов
/ 29 февраля 2020

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

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Пожалуйста, попробуйте добавить ниже 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 голосов
/ 29 февраля 2020

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

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

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

...