여러분 안녕하세요.
홈페이지에서는 작동하는 코드가 채팅방 배경에서는 작동하지 않는 이유가 무엇일까요?
현재 채팅방이 전체 화면일 때 표시가 제대로 되지 않고 있습니다.
배경과 본문을 위한 제 코드입니다
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 )
4
확인해 봤는데 해당 이미지 경로를 제대로 작동시키지 못했습니다. 대신 테마의 assets 폴더에 해당 이미지를 업로드한 후, CSS에서 변수로 다음을 사용해야 합니다:
background-image: url($image_variable_name);
여기서 image_variable_name은 이미지를 업로드할 때 지정한 이름입니다.
귀한 시간을 내어 제 문제를 도와주셔서 감사합니다. @Arkshine @Lilly
회원 등급을 2로 설정했습니다. 이제 채팅 영역에 들어갈 수 있습니다.
네, 몇 가지 CSS 코드가 문제를 일으키고 있었습니다.
수정했는데 이번에는 채팅 영역 아래쪽에 여백이 생겼습니다.
그리고 body:before 코드 안의 bottom 코드가 작동하지 않습니다.
지금 바로 해결할 수는 없습니다.
@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);
}
현재 이 코드를 사용 중이며 정상적으로 작동하고 있습니다.
틀린 부분이 있다면 알려주세요. 감사합니다.
