Всем привет.
Почему код, который работает на главной странице, не работает на фоне чата?
Сейчас отображение некорректное, когда чат находится в полноэкранном режиме.
Мой код для фона и body:
body {
background-color: #1a1a2b;
}
body:before {
display: inline-block;
border-radius: 10px;
width: 1125px;
height: inherit;
background-color: #26263B;
content: " ";
position: absolute;
left: 50%;
right: 0;
top: 72px;
bottom: 11px;
transform: translate(-50%, 0);
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
}
body {
position: relative;
}
body {
background-image: url("https://pvpfarm.com/uploads/default/original/1X/1b5dd68a865855193164193f21e08630a3ed6da6.png");
background-size: 240px;
background-repeat: repeat;
background-attachment: local;
}
Не хочу засорять эту тему, но кто-нибудь может помочь?
Я пробовал много способов, но ничего не работает.
Я хотел посмотреть ваш сайт, но чат, похоже, отключен для меня.
Я протестировал локально, и ваш CSS, кажется, работает нормально.
Возможно, какой-то другой CSS-код переопределяет ваш фон или мешает его корректному отображению.
Lilly
(Lillian )
04.Июнь.2024 00:31:27
4
Я посмотрел, но не смог заставить этот путь к изображению работать корректно. Вместо этого загрузите изображение в папку assets вашей темы, а затем в CSS используйте переменную:
background-image: url($image_variable_name);
где image_variable_name — это имя, которое вы зададите при загрузке.
Спасибо, что потратили своё драгоценное время на решение моей проблемы. @Arkshine @Lilly
Я повысил ваш уровень участника до 2. Теперь вы можете войти в чат.
Да, несколько фрагментов CSS-кода вызывали проблемы.
Я их исправил, но теперь в нижней части области чата появился отступ.
Кроме того, свойство bottom в селекторе body:before не работает.
Сейчас я не могу это исправить.
@Lilly , если я правильно понял ваше сообщение, я загрузил изображение именно так:
Кстати, я создал этот дизайн, не имея никаких знаний в CSS. Поэтому я, возможно, допускаю много ошибок. Благодаря вам я учусь на своих ошибках.
.has-full-page-chat:not(.discourse-sidebar) #main-outlet {
height: auto;
position: absolute;
left: 50%;
right: 0;
top: auto;
bottom: auto;
transform: translate(-50%, 0);
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
}
Я в настоящее время использую этот код, и он работает.
Поправьте меня, если я ошибаюсь. Спасибо.