¿Por qué los códigos de fondo no funcionan en la página de chat a pantalla completa?

Desarrollador
1

Hola a todos.
¿Por qué los códigos que funcionan para la página principal no funcionan en el fondo de la sala de chat?

Ekran görüntüsü 2024-06-01 183315
Ekran görüntüsü 2024-06-01 1833152548×1040 435 KB

Ekran görüntüsü 2024-06-01 183322
Ekran görüntüsü 2024-06-01 1833222537×1256 58.2 KB

Hay una vista mala ahora mismo, cuando la sala de chat está en pantalla completa.

Mis códigos para fondo y cuerpo

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

No quiero hacer spam en este tema, pero ¿alguien puede ayudar?
Lo intenté de muchas maneras pero no funciona.

3

Quería ver tu sitio, pero el chat parece estar deshabilitado para mí.

Probé localmente y tu CSS parece funcionar bien.

image
image1460×594 59.1 KB

Es posible que algún otro código CSS esté sobrescribiendo tu fondo o impidiendo que se muestre correctamente.

1 me gusta
4

Eché un vistazo y no pude hacer que esa ruta de imagen funcionara correctamente. En su lugar, deberías cargar esa imagen en tu carpeta de assets para el tema, y luego usarla como variable en CSS:

background-image: url($nombre_variable_imagen);

donde nombre_variable_imagen es lo que le das al subirla.

1 me gusta
5

Gracias por dedicar tu valioso tiempo a mi problema. @Arkshine @Lilly
He establecido tu nivel de miembro en 2. Puedes acceder al área de chat.

Sí, algunos códigos CSS estaban causando problemas.
Lo edité, pero esta vez apareció un espacio en la parte inferior del área de chat.

Ekran görüntüsü 2024-06-04 085015
Ekran görüntüsü 2024-06-04 0850152551×362 37.3 KB

Y el código bottom en el código body:before no funciona.
No puedo solucionarlo ahora mismo.

@Lilly Si entendí correctamente lo que escribiste, así es como subí la foto.

Ekran görüntüsü 2024-06-04 085453

Por cierto, hice este diseño sin tener ningún conocimiento de CSS. Por eso puedo cometer muchos errores. Gracias a ti, estoy aprendiendo de mis errores. :pray:

1 me gusta
6 
.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);
}

Actualmente estoy usando estos códigos y están funcionando.
Por favor, corríjame si me equivoco. Gracias