皆さん、こんにちは。
ホームページで機能するコードがチャットルームのバックグラウンドで機能しないのはなぜですか？
チャットルームがフルスクリーン表示のとき、現在は表示が悪いです。
バックグラウンドとボディのコードです。
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コードが背景を上書きしているか、正しく表示されないようにしている可能性があります。
「いいね！」 1
Lilly
(Lillian Louis)
4
画像パスが正しく機能しないことを確認しました。代わりに、その画像をテーマのアセットフォルダにアップロードし、CSSで次のように変数を使用してください。
background-image: url($image_variable_name);
ここで、image_variable_name は、アップロード時に付ける名前です。
「いいね！」 1
私の問題に貴重な時間を割いていただきありがとうございます。 @Arkshine @Lilly
メンバーレベルを2に設定しました。チャットエリアに入ることができます。
はい、いくつかのCSSコードが問題を引き起こしていました。
編集しましたが、今回はチャットエリアの下部にスペースができてしまいました。
そして、body:beforeコードのbottomコードが機能しません。
今はこれを修正できません。
@Lilly あなたがお書きになったことを正しく理解したのであれば、写真をアップロードしたのはこの方法です。
ちなみに、このデザインはCSSの知識が全くない状態で作りました。そのため、多くの間違いを犯している可能性があります。あなた方のおかげで、間違いから学んでいます。 
「いいね！」 1
.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);
}
これらのコードを使用しており、機能しています。
もし間違っていたら訂正してください。ありがとうございます。
