カテゴリの背景画像はモバイル向けに適切に拡大されない

貢献 UX
1

category background image doesn’t scale correctly in mobile ux,

here is the background image in desktop:

png_fixed

the same image in a topic for mobile ux:

jpg_fixed

「いいね！」 1
2

I’m not aware of anyway to add background images to topic pages based on the topic category (which is what the second screenshot looks like) except via a theme.

Category images only show up on top of their pages and on the categories topic-list. How are you adding these images? Can you please share a link to a page where I can see this?

「いいね！」 2
3

here are two samples:

https://padpors.com/c/PP-Porch/Library

even in safe-mode and when the themes are deactivated, you can see the background image in a topic page. e.g. of safe-mode activated page:

5

thanks, but I’m a little bit confused:

we used the category setting to add the background and not a theme.

image
image.png781×635 62.6 KB

「いいね！」 2
6

Ah, I see what you mean, this was a feature that I hadn’t used before so apologies for the confusion :sunflower:

I’ll take a look and see what I can do to make it look nicer :+1:

「いいね！」 6
8

この件について、最新情報はありませんか？近日追加予定のいくつかのサブカテゴリにこれらを実装しようと考えているのですが、モバイル表示だと確かに見苦しいですね…

あるいは、CSSを使って個別のカテゴリやサブカテゴリに独自の背景を設定する方法はありますか？

9

この方法を解決したので、私のために機能したテクニックを共有しようと思います。ID が category-off-topic-rwby のカテゴリに https://some.url の画像を背景として追加するには、テーマコンポーネントで次の CSS を使用しました。

body[class~="category-off-topic-rwby"] {
    #background {
    background: url(https://some.url);
    background-position: center center;
    background-size: cover;
    z-index: -1;
    opacity: .50;
    min-width: 100vw;
    width: auto;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    }
}

これにより、https://some.url の画像が中央に配置され、不透明度プロパティを使用して彩度が低下し、ページと一緒にスクロールしないように固定されます。結果は以下の通りです。

PNG
PNG1333×1147 364 KB

「いいね！」 3
10

iOS デバイスをお使いでしょうか？もしそうであれば、これは完全に Discourse のせいというわけではありません。iOS デバイスは background-attachment: fixed; という CSS プロパティを無視します。これは、カテゴリ画像を設定した際に、固定されたボディ背景の効果を Discourse が現在使用しているプロパティです。

iOS デバイスがそのプロパティを無視する理由は、それによる常時の再描画への懸念 때문입니다。

私が言いたいことの例をいくつか挙げます。

背景に CSS の単色を使用する場合、スクロール時に再描画されるのはスクロールバーのみです（緑色のハイライト）。

ここまでは問題ありません。しかし、実際の画像を追加し、それを background-attachment: fixed; と組み合わせると、ブラウザはスクロールのたびに位置を維持するために常時再描画を行う必要があります。

背景がスクロールのたびに再描画されているのにお気づきでしょうか？これが iOS デバイスがそのプロパティを無視する理由です。

あなたの修正は良いものですが、それでも上記の動画のようにブラウザに背景の再描画を引き起こしています。

これは以前から私の課題リストに上がっていましたが、今後 3 週間以内に修正を組み込むよう努めます。

それまで待てない場合は、私が実装する予定の以下の方法をご自身のテーマで試してみてください。

「いいね！」 3