لماذا لا تعمل أكواد الخلفية في صفحة الدردشة بملء الشاشة؟

[ogulcan1787]

مرحباً بالجميع.
لماذا لا تعمل الأكواد التي تعمل للصفحة الرئيسية في خلفية غرفة الدردشة؟

هناك عرض سيء حاليًا، عندما تكون غرفة الدردشة في وضع ملء الشاشة.

أكواد الخلفية والجسم الخاصة بي

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;
}

[ogulcan1787]

لا أريد إزعاج هذا الموضوع ولكن هل يمكن لأحد المساعدة؟
لقد جربت العديد من الطرق ولكنها لم تنجح.

[Arkshine]

أردت تصفح موقعك، لكن يبدو أن الدردشة معطلة بالنسبة لي.

لقد اختبرت محليًا، ويبدو أن CSS الخاص بك يعمل بشكل جيد.

من المحتمل أن يقوم رمز CSS آخر بالكتابة فوق الخلفية الخاصة بك أو يمنعها من الظهور بشكل صحيح.

[Lilly (Lillian Louis)]

لقد ألقيت نظرة ولم أتمكن من جعل مسار الصورة هذا يعمل بشكل صحيح. يجب عليك بدلاً من ذلك تحميل هذه الصورة في مجلد الأصول الخاص بك للسمة، ثم استخدامها كمتغير في CSS:

background-image: url($image_variable_name);

حيث image_variable_name هو الاسم الذي تعطيه لها عند تحميلها.

[ogulcan1787]

شكرا لك على تخصيص وقتك الثمين لمشكلتي. @Arkshine @Lilly
لقد قمت بتعيين مستوى عضويتك إلى 2. يمكنك الدخول إلى منطقة الدردشة.

نعم، كانت بعض أكواد CSS تسبب مشاكل.
لقد قمت بتعديلها، ولكن هذه المرة كان هناك مسافة في أسفل منطقة الدردشة.

وكود bottom في كود body:before لا يعمل.
لا يمكنني إصلاح هذا الآن.

@Lilly إذا فهمت ما كتبته بشكل صحيح، فهذه هي الطريقة التي قمت بها بتحميل الصورة.

بالمناسبة، لقد قمت بهذا التصميم دون أي معرفة بـ CSS. لهذا السبب قد أرتكب العديد من الأخطاء. بفضلكم، أتعلم من أخطائي.

[ogulcan1787]

.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);
}

أنا أستخدم هذه الأكواد حاليًا وهي تعمل.
من فضلك صححني إذا كنت مخطئًا. شكرًا