Category background images do not scale good for mobile

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 Like
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 Likes
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 Likes
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 Likes
8

Any news on this? I’m thinking about implementing these for a few subcategories we’re about to add, and they do indeed look terrible on mobile …

Alternatively, is there a way to implement a unique background for an individual category/subcategory using CSS?

9

I figured out how to do this and thought I’d share the technique that worked for me. To add the image at https://some.url as the background for the category with the id category-off-topic-rwby, I used this CSS in a theme component:

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

That centers the image at https://some.url and desaturates it (using the opacity property), plus makes it fixed so that it doesn’t scroll with the page. The result:

PNG
PNG1333×1147 364 KB

3 Likes
10

I’m guessing that you’re using an iOS device? If so, this is really only partially Discourse’s fault. iOS devices don’t respect background-attachment: fixed; which is the CSS property currently used in Discourse to give the effect of a fixed body background when you set category images.

The reason why iOS devices ignore that property is due to their concerns about the constant repaint it causes.

Here’s some examples of what I mean,

If you use a solid CSS color as the background, the only thing that gets repainted as you scroll is the scrollbar - green highlight.

So far so good. However, once you add an actual image and combine that with background-attachment: fixed; then the browser has to constantly repaint it to keep in place with every scroll.

Notice how the background gets repainted with every scroll? This is why iOS devices don’t respect that property.

Your fix is good but you’re still causing the browser to repaint the backgrounds just like the video above.

This has been on my list for a while now, but I’ll try to squeeze in a fix within the next three weeks.

If you can’t wait that long, here’s what I intend to implement and you can give that a go in your theme.

3 Likes