Perché i codici di sfondo non funzionano nella pagina chat a schermo intero?

Sviluppatore
1

Ciao a tutti.
Perché i codici che funzionano per la home page non funzionano nello sfondo della chat room?

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

Attualmente la visualizzazione è pessima quando la chat room è a schermo intero.

I miei codici per lo sfondo e il corpo

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

Non voglio spammare questo argomento, ma qualcuno può aiutarmi?
Ho provato in molti modi ma non funziona.

3

Volevo guardare il tuo sito, ma la chat sembra essere disabilitata per me.

Ho testato localmente e il tuo CSS sembra funzionare bene.

image
image1460×594 59.1 KB

Potrebbe essere possibile che altro codice CSS sovrascriva il tuo sfondo o ne impedisca la corretta visualizzazione.

1 Mi Piace
4

Ho dato un’occhiata e non sono riuscito a far funzionare correttamente il percorso di quell’immagine. Dovresti invece caricare quell’immagine nella tua cartella assets per il tema, e poi usare come variabile in CSS:

background-image: url($image_variable_name);

dove image_variable_name è il nome che le dai quando la carichi.

1 Mi Piace
5

Grazie per aver dedicato il tuo prezioso tempo al mio problema. @Arkshine @Lilly
Ho impostato il tuo livello membro su 2. Puoi accedere all’area chat.

Sì, alcuni codici CSS stavano causando problemi.
L’ho modificato, ma questa volta c’era uno spazio in fondo all’area chat.

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

E il codice bottom nel codice body:before non funziona.
Non posso risolverlo in questo momento.

@Lilly Se ho capito bene quello che hai scritto, ecco come ho caricato la foto.

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

Tra l’altro, ho realizzato questo design senza alcuna conoscenza di CSS. Ecco perché potrei commettere molti errori. Grazie a te, sto imparando dai miei errori. :pray:

1 Mi Piace
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);
}

Attualmente sto usando questi codici e funzionano.
Per favore correggimi se sbaglio. Grazie